@charset "utf-8";



/* contents style for drug kudoh */

.bg_gra_blue{
    background: rgb(61,204,225);
    background: -webkit-linear-gradient(rgba(61,204,225,0.5) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0.5) 65%, rgba(61,204,225,0.5) 100%);
    background: -o-linear-gradient(rgba(61,204,225,0.5) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0.5) 65%, rgba(61,204,225,0.5) 100%);
    background: linear-gradient(rgba(61,204,225,0.5) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0.5) 65%, rgba(61,204,225,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dcce1', endColorstr='#3dcce1',GradientType=0 );
}
.bg_gra_blue_narrow{
    background: rgb(61,204,225);
    background: -webkit-linear-gradient(rgba(61,204,225,0.5) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(61,204,225,0.5) 100%);
    background: -o-linear-gradient(rgba(61,204,225,0.5) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(61,204,225,0.5) 100%);
    background: linear-gradient(rgba(61,204,225,0.5) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(61,204,225,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dcce1', endColorstr='#3dcce1',GradientType=0 );
}
.hr_blue{ border-top: 1px solid #217783; border-bottom: 1px solid #24d3ea; }



.news .newsimg{overflow: hidden;background-size: cover !important;background-position: 50% 25% !important;}
.news .date{text-align: left; font-weight: bold; margin: 0; font-size: 85%;}
.news h4{text-align: left; font-weight: bold; margin: 0; padding:12px 0 0 0; text-decoration: underline; font-size: 85%; line-height: 1.4rem;}
.news .frame {
    width: 145px;
    height:145px;
    margin: 8px auto 8px;
    overflow: hidden;

    text-align: left;
    text-decoration: none;
    color:#3a3a3a !important;

    transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}
.news .frame:hover{filter:alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}
.news .newsimg {
    overflow: hidden;
    background-size: cover !important;
    background-position: 50% 25% !important;
}

.swiper-container {
    width: 100%;
    height: 300px;
    margin: 0 auto 26px;
    padding: 20px 0;
    background: #f6f6f6;
}
.swiper-slide {
    text-align: center;
    font-size: 139%;
    background: #fff;
    width: 250px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    border: 1px solid #cac8c8;
}
.section.shopnews{
    padding:0 0;
    width: 100%;
    background-color: #f6f6f6;
    text-align: center;
    margin:0 0;
    border-bottom: 1px solid #cac8c8;
}
.section.shopnews h2{
    width: 960px;
    margin:0 auto;
    text-align: left;
    font-size: 154% !important;
    font-weight: normal;
    padding-left: 30px;
}
.section.shopnews .section_title{
    background: #fff !important;
    border-bottom: 1px solid #cac8c8;
}
.section.shopnews .section_inner{ margin: 0 auto; padding: 0;}
.section.shopnews .newsgroup .news{background: #fff; padding: 0 10px 10px 10px; display: table; width: 168px; min-height: 270px;}
.news_main .newsgroup{overflow: hidden; margin: 0 auto 20px;}
.news_main .itemgroup ,.news_main .newsgroup{}
.news_main .itemgroup .item,.news_main .newsgroup .news{
    width: 168px;
    min-height:270px;
    overflow:hidden;
    float: left;
    margin: 16px 18px 20px 0;
    border: 1px solid #cac8c8;
}



.btn_sp,.btn.disabled {display: none;}
.btn {
    display: block;
    margin: 0 auto;
    max-width: 280px;
    background: #00d3ec;

    background-image: -webkit-linear-gradient(top, #00d3ec, #00d3ec);
    background-image: -moz-linear-gradient(top, #00d3ec, #00d3ec);
    background-image: -ms-linear-gradient(top, #00d3ec, #00d3ec);
    background-image: -o-linear-gradient(top, #00d3ec, #00d3ec);
    background-image: linear-gradient(to bottom, #00d3ec, #00d3ec);

    -webkit-border-radius: 20;
    -moz-border-radius: 20;
    border-radius: 20px;

    font-family: Arial;
    color: #ffffff;
    font-size: 154%;
    padding: 8px;
    text-decoration: none;
    text-align: center;
}
.btn:hover {
    background: #00b4ec;
    text-decoration: none;
}
.btn.disabled {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    display: block;
    margin: 0 auto;
    max-width: 280px;
    background: #d4d4d4;

    background-image: -webkit-linear-gradient(top, #d4d4d4, #d4d4d4);
    background-image: -moz-linear-gradient(top, #d4d4d4, #d4d4d4);
    background-image: -ms-linear-gradient(top, #d4d4d4, #d4d4d4);
    background-image: -o-linear-gradient(top, #d4d4d4, #d4d4d4);
    background-image: linear-gradient(to bottom, #d4d4d4, #d4d4d4);

    -webkit-border-radius: 20;
    -moz-border-radius: 20;
    border-radius: 20px;

    font-family: Arial;
    color: #ffffff;
    font-size: 154%;
    padding: 0 8px;
    text-decoration: none;
    text-align: center;
}
.btn.disabled:hover {
    background: #d4d4d4;
    text-decoration: none;
}

a.scrooll_arrow:hover{
    filter:alpha(opacity=100);-moz-opacity: 1; opacity: 1;
    background: rgba(227,227,227,1);
}
a.scrooll_arrow:hover img{
    filter:alpha(opacity=100);-moz-opacity: 1; opacity: 1;
}




/*------------------------------*/
/* for PC */
/*------------------------------*/

/* パソコン用 */
@media screen and ( min-width : 768px ) {

.sp_only{ display:none !important; }
.pc_only{ display:block !important; }
#contents{ margin-top: 0; }



.splash_panel{position: relative;}
.splash_panel .pc_only{
    width:100%;
    height: 640px;
    background:url(../img/htitle_bg.jpg);
    background-size: cover;
    background-position: center;
}
.splash_panel .daiji{
    position: absolute;
    top: -70px;
    left: 0;
    right: 0;

    bottom: 0;

    margin: auto;
    width:440px;
    height:74px;
}
a.scrooll_arrow{
    position: absolute;
    top: 260px;
    left: 0;
    right: 0;

    bottom: 0;

    margin: auto;
    width:60px;
    height:60px;
    background: rgba(255,255,255,1);
    border-radius: 50%;
    text-align: center;
    padding: 8px 0 0 0;
    box-shadow: 0 3px 3px 3px rgba(0,0,0,0.2);
}



.layout_box{
    position: relative;
    width:90%;
    overflow: hidden;

    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);
    border: 1px solid #e4e4e4;
}
.layout_box.first_box{ margin:-120px auto 0 auto; }
.layout_box.first_box:first-child{ padding-bottom: 12px; }
.layout_box.privacy_box{ margin:-120px auto 0 auto; }



.to_shop_kudoh a{
    width:50%;
    float: left;
    text-align:center;
    padding:24px 0;
    background:url(../img/bg_blue_line.png) left top repeat-x;
    border:1px solid #fff; 
    overflow: hidden;
}
.to_shop_cosme a{
    width:50%;
    float: right;
    text-align:center;
    padding:36px 0;
    background:url(../img/bg_pink_line.png) right top repeat-x;
    border:1px solid #fff;
    overflow: hidden;
}



.wrapper_graybox{
    display: table;
    border-collapse: separate;
    border-spacing: 12px 0;
}
.wrapper_rr_right{
    width:50%;
    display: table-cell;
    table-layout: fixed;
}
.gray_box.l_left{
    display: table-cell;

    width:50%;
    overflow: hidden;

    background:#f8f8f8;
    box-shadow: 2px 2px 3px rgba(229,229,229,1) inset;
    border-radius: 6px;
    color: #333;
    table-layout: fixed;
}

.gray_box.l_right{
    width:100%;

    padding:12px 12px;
    background:#f8f8f8;
    box-shadow: 2px 2px 3px rgba(229,229,229,1) inset;
    overflow: hidden;
    border-radius: 6px;
    color: #333;
}
.gray_box.l_left h3{ font-size: 162%; padding:24px; }
.gray_box.l_right h3{ font-size: 162%; padding:24px 12px; }

.gray_box.l_left p{ font-size: 100%; line-height: 1.2rem; padding:12px 0 12px 24px; }
.gray_box.l_right p{ font-size: 100%; line-height: 1.2rem; padding:12px 12px 12px 0; }

.gray_box.l_left .img_box{ display:table !important; width:100%; margin:0 auto; table-layout: fixed;}
.gray_box.l_left .img_box div{ display:table-cell !important; vertical-align: middle; text-align:center; padding:12px 6px; table-layout: fixed; }

.gray_box.l_right .img_box{ display:table !important; width:100%; margin:0 auto; table-layout: fixed; }
.gray_box.l_right .img_box div{ display:table-cell !important; vertical-align: middle; text-align:right; table-layout: fixed; /*padding:12px 6px;*/ }
.gray_box.l_right .img_box div{ width:45%; }

.layout_box.second_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.second_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.second_box .explain{
    display:table-cell;
    vertical-align: top;
    padding:36px;
    line-height: 1.4rem;
}
.layout_box.second_box .portrait{
    display: table-cell;
    vertical-align: top;
    width:30%;
    text-align:right;
    padding:0 24px 0 0;
}
.layout_box.second_box .portrait img{
    border-radius: 8px;
}



.layout_box.third_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.third_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.third_box .explain table{
    border-collapse: separate !important;
    border-spacing: 12px 24px !important;
}
.layout_box.third_box .explain{
    vertical-align: top;
    padding:24px;
    line-height: 1.4rem;
}
.layout_box.third_box .explain table td:nth-child(odd){
    width:25%;
}



.layout_box.fourth_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.fourth_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.fourth_box .explain table{
    border-collapse: separate !important;
    border-spacing: 12px 24px !important;
}
.layout_box.fourth_box .explain{
    vertical-align: top;
    padding:24px;
    line-height: 1.4rem;
}
.layout_box.fourth_box .explain table td:nth-child(odd){
    width:25%;
}



.layout_box.privacy_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.privacy_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.privacy_box .explain table{
    border-collapse: separate !important;
    border-spacing: 12px 24px !important;
}
.layout_box.privacy_box .explain{
    vertical-align: top;
    padding:36px;
    line-height: 1.4rem;
}
.layout_box.privacy_box .explain h4{
    font-size:139%;
    padding:24px 0;
}
.layout_box.privacy_box .explain h5{
    font-size:124%;
    padding:24px 0;
}
.layout_box.privacy_box .explain .first_parag{
    padding:24px;
    background: #f6f6f6;
    margin:12px 0;
}
.layout_box.privacy_box .explain .normal_parag{
    padding:12px;
}

.section_onedrop{}
.section_onedrop p{ padding-left: 1.3rem; }
.section_onedrop p span{ margin-left:-1rem; padding-right: 0.3rem; }
.section_onedrop p:last-child {}






}







/*------------------------------*/
/* for tablet,Phablet -2column- */
/* iPad,iPadmini,一般的なAndroidタブレット〜iPad10.5インチモデルまでを想定 */
/* 本来は〜834pxまでだが、今回のヘッダーフッター最適設計幅960pxまではタブレット扱いにする */
/*------------------------------*/

/* タブレット、ファブレット用 */
@media screen and ( min-width:768px ) and ( max-width:959px ) {
}








/*------------------------------*/
/* for SmartPhone -1column- */
/* iPad,iPadminiをスマホには含めない */
/*------------------------------*/

/* スマホ用 */
/* 一般的な768pxを対象とする */
@media screen and ( max-width : 767px ) {

.sp_only{ display:block !important; }
.pc_only{ display:none !important; }
#header .menu_main{ display:none !important; }
#contents{margin-top: 0;}

.splash_panel{position: relative;}
.splash_panel .sp_only{
    width:100%;
    height: 620px;
    background:url(../img/htitle_bg_sp.jpg);
    background-size: cover;
    background-position: center;
}
.splash_panel .daiji{
    position: absolute;
    top: -200px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:270px;
    height:45px;
}
.scrooll_arrow{
    position: absolute;
    top: 390px;
    left: 0;
    right: 0;
    margin: auto;
    width:60px;
    height:60px;
    background: rgba(255,255,255,1);
    border-radius: 50%;
    text-align: center;
    padding: 8px 0 0 0;
    box-shadow: 0 3px 3px 3px rgba(0,0,0,0.2);
}



.layout_box{
    width:90%;
    background-color: rgba(255,255,255,1);
    overflow: hidden;
    box-shadow: 0 0 12px 6px rgba(0,0,0,0.1);
    position: relative;
}
.layout_box.first_box{ margin:-120px auto 0 auto; }
.layout_box.first_box:first-child{ padding-bottom: 12px; }
.layout_box.privacy_box{ margin:-120px auto 36px auto !important; }



.wrapper_shopbox{
    display: table;
    width:100%;
}

.to_shop_kudoh{
    display: table-cell;
    width:50%;
    text-align:center;
    padding:24px 24px 12px;
    background:url(../img/bg_blue_line.png) left top repeat-x;
    border:1px solid #fff; 
    overflow: hidden;
}
.to_shop_cosme{
    display: table-cell;
    width:50%;
    text-align:center;
    padding:8px 12px 0;
    background:url(../img/bg_pink_line.png) right top repeat-x;
    border:1px solid #fff;
    overflow: hidden;
}



.gray_box{ margin:12px 12px; }

.wrapper_graybox{}
.wrapper_rr_right{}
.wrapper_rr_right .gray_box h3 span{display:block;}

.gray_box.l_left{
    padding:12px 12px;
    background:#f8f8f8;
    box-shadow: 2px 2px 3px rgba(229,229,229,1) inset;
    border-radius: 6px;
    color: #333;
}
.gray_box.l_right{
    padding:12px 12px;
    background:#f8f8f8;
    box-shadow: 2px 2px 3px rgba(229,229,229,1) inset;
    overflow: hidden;
    border-radius: 6px;
    color: #333;
}
.gray_box.l_left h3,.gray_box.l_right h3{ font-size: 162%; padding:12px; }
.gray_box.l_left p,.gray_box.l_right p{ font-size: 100%; line-height: 1.2rem; padding:12px; }

.gray_box.l_left .img_box{ width:100%; margin:0 auto;}
.gray_box.l_left .img_box div{ vertical-align: middle; text-align:center; padding:12px 6px;}

.gray_box.l_right .img_box{ width:100%; margin:0 auto;}
.gray_box.l_right .img_box div{ vertical-align: middle; text-align:right; padding:12px 6px;}
.gray_box.l_right .img_box div{}

.layout_box.second_box{ margin:0 auto; }
.layout_box.second_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.second_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.second_box .explain{
    vertical-align: top;
    padding:36px;
    line-height: 1.4rem;
}
.layout_box.second_box .portrait{
    vertical-align: top;
    text-align:center;
}
.layout_box.second_box .portrait img{
    border-radius: 8px;
}

.layout_box.third_box{ margin:0 auto; }
.layout_box.third_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.third_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.third_box .explain table{
    border-collapse: separate !important;
    border-spacing: 12px 24px !important;
}
.layout_box.third_box .explain{
    vertical-align: top;
    padding:24px;
    line-height: 1.4rem;
}
.layout_box.third_box .explain table td{
    display: block !important;
}
.layout_box.third_box .explain table td:nth-child(odd){
    font-weight: bold;    
}

.layout_box.fourth_box{ margin:0 auto; }
.layout_box.fourth_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.fourth_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.fourth_box .explain table{
    border-collapse: separate !important;
    border-spacing: 12px 24px !important;
}
.layout_box.fourth_box .explain{
    vertical-align: top;
    padding:24px;
    line-height: 1.4rem;
}
.layout_box.fourth_box .explain table td{
    display: block !important;
}
.layout_box.fourth_box .explain table td:nth-child(odd){
    font-weight: bold;    
}

.layout_box.privacy_box{ margin:0 auto; }
.layout_box.privacy_box h3{
    position: relative;
    font-size: 162%;
    padding: 24px 24px;
}
.layout_box.privacy_box h3:after{
    position: absolute;
    top: 60px;
    left: 0;
    content:'';
    width: 64px;
    height: 12px;
    border-radius: 0 8px 8px 0;
    background: #a8a8a8;
}
.layout_box.privacy_box .explain table{
    border-collapse: separate !important;
    border-spacing: 12px 24px !important;
}
.layout_box.privacy_box .explain{
    vertical-align: top;
    padding:24px;
    line-height: 1.4rem;
}
.layout_box.privacy_box .explain h4{
    font-size:139%;
    padding:12px 0;
}
.layout_box.privacy_box .explain h5{
    font-size:124%;
    padding:12px 0;
}
.layout_box.privacy_box .explain .first_parag{
    margin:24px 0;
    background: #f6f6f6;
    padding:12px;
}
.layout_box.privacy_box .explain .normal_parag{
    padding:12px;
}

.section_onedrop{}
.section_onedrop p{ padding-left: 1.3rem; }
.section_onedrop p span{ margin-left:-1rem; padding-right: 0.3rem; }
.section_onedrop p:last-child {}







}


/* eof */