@charset "UTF-8";
/* CSS Document */

@font-face{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
html{
font-size:62.5%;/*16px62.5%=10px*/
}
body{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
}
.pc {
display: block;
}
.sp{
display: none;
}

/*********************
*********************
*****ヘッター*****
*********************
*********************/
.header-inner{
max-width: 100%;
margin: 0 auto;
margin-bottom: 5vw;
}
.companyrogo{
margin: 0 auto;
display: block;
width: 15vw;
padding-top: 5vw;
padding-bottom: 5vw;
}
.header_img{
display: block;
width: 50vw;
margin: 0 auto;	
margin-bottom: 10vw;
}

/********************
*********************
******navigtion******
*********************
*********************/
.nav-list{
width: 80vw;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.nav-item{
padding-right: 3vw;;
padding-bottom: 20px;
}
.nav-item:last-of-type{
padding-right: 0px;
}
.nav-item>a{
font-size: 1vw;
color:#000;
}
/********************
*********************
*******section********
*********************
*********************/
.sectionbox{
width: 100%;
margin: 0 auto;
}
h1{
width: 100%;
margin: 0 auto;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 1.3vw;
text-align: center;
color: #000;
margin-bottom: 10vw;
line-height: 3vw;
}
h2{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 1.3vw;
color: #000;
letter-spacing: 0.1vw;	
padding-bottom: 8vw;
text-align: center;
}
h4{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
line-height:1.4em;
color: #000;
margin-bottom: 10vw;	
}
.cap{
font-size: 1vw;
padding-top: 35px;
}
.box_ul{
width: 60%;
margin: 0 auto;
}
.li_box{
width: 70%;
margin: 0 auto;
text-align: center;
margin-bottom: 10vw;
}
.recovery{
display: block;
margin: 0 auto;
width: 70%;
margin-bottom: 8vw;
}

.buy_btn{
margin: 0 auto;
margin-top: 5vw;
margin-bottom: 10vw;
width: 100%;
text-align: center;
color: #fff;
padding-top: 2.5vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 2vw;
background-color: #000;
padding-bottom: 2.5vw;
border-radius: 100vh;
}


.component_ul{
width: 100%;
margin-bottom: 5vw;
}
.ex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ex_text{
width: 77%;
font-size: 1.2vw;
line-height:1.3em;
color: #3f3533;
letter-spacing: 0.1vw;	
text-align: justify;
}
.component_li{
position: relative;
width: 27%;
background-color:#000000;
margin-bottom: 3vw;
margin-right: 5%;
}
.component_li_osusume{
position: relative;
width:100%;
height: 190vw;
border: solid 1px #000000;
border-radius: 3vw;
margin-bottom: 3vw;
margin-top: 5vw;
}

.test_tx{
padding-top: 5vw;	
	
}

.test_tx_text{
padding-top: 2vw;	
	
}

.component_li_osusumetitle{
text-align: center;	
color: #3f3533;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.8vw;
padding-top: 5VW;
}
.component_li_osusumetext{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #3f3533;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
padding-top: 4vw;
line-height: 1.7em;
}
.component_li_osusumetext_test{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #3f3533;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
padding-top: 25vw;
line-height: 1.7em;
}



.component_li_osusumetext_test_02{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #3f3533;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
padding-top: 0vw;
line-height: 1.7em;
}



.component_li::before {
content: "";
display: block;
padding-bottom: 100%;
}
.component_li_text{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.6vw;
line-height:2.5vw;
letter-spacing: 0.1vw;
color: #FFFFFF;
}
.osusume01{
position: relative;
float: left;
width: 48%;
margin: 0 auto;
height: 6.5vw;
line-height: 2.3vw;
background-color: #000000;
margin-right: 2vw;
text-align: center;
border-radius: 5vw;
font-size: 1.8vw;
letter-spacing: 0.1vw;
color: #FFFFFF;
padding-top: 2.0vw;
}
.img001{
position: absolute;
width: 35%;
top:-2vw;
left: -2vw;
}
.img002{
position: absolute;
width: 40%;
top:-3vw;
left: -4vw;
}
.component_li_osusumeph{
width: 90%;
margin:  0 auto;
margin-top: 3vw;
}
.mornigph{
display: block;
float: left;
width: 48%;
padding-right: 2vw;
margin-bottom: 3vw;
}
.mornigph_02{
display: block;
float: left;
width: 48%;
margin-bottom: 1vw;
}
.osusume01:last-of-type{
margin-right: 0vw;
}

/*******************
********************
*********表*********
********************
********************/
.box_text{
width: 55vw;
margin: 0 auto;
margin-top: 5vw;
}
.testtitle{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-size:2vw;
text-align: center;
color: #3f3533;
font-weight:normal;
margin-bottom: 2vw;
}
table{
margin: 0 auto;

width: 55vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
border-collapse: collapse;
margin-bottom: 5vw;
}
table th{
color: #3f3533;
background: #B3A8A6;
border: solid 1px #3f3533;
padding-top: 1.5vw;
padding-bottom: 1.5vw;
padding-left: 1vw;
padding-right: 1vw;
font-size: 1.3vw;
text-align: center;
}
table td{
color: #3f3533;
background: #fff;
padding-top: 2vw;
padding-bottom: 2vw;
padding-left: 1vw;
padding-right: 1vw;
font-size: 1.3vw;
line-height: 1.5em;
border: solid 1px #3f3533;
}



/*******************
********************
******footer******
********************
********************/

.footerbottom{
width:100%;
background-color: #000;
text-align: center;
}
.img23{
width: 13vw;
padding-top: 10vw;
}
.address p{
padding-top: 3vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1vw;
color: #fff;
line-height:1.5vw;
}
.address.sub{
padding-top: 3vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1vw;
color: #fff;
line-height:1.5vw;
}
.img24{
padding-top: 5vw;
width: 3vw;
}
.img25{
width: 3vw;
}
.copyright{
padding-top: 5vw;
padding-bottom: 2vw;
width: 100%;
text-align: center;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size:0.8vw;
color: #fff;
}















/*pc版  幅が641px以上のscreenの時はこのcssを使用してくださいという指示*/

@media screen and (max-width : 767px ){
html{
font-size: 0.625vw;
}
body {
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
img{
max-width: 100%;
}
	
.pc {
display: none;
}
.sp{
display: block;
}
	
/*********************
*********************
*****ヘッター*****
*********************
*********************/
.header-inner{
max-width: 100%;
margin: 0 auto;
margin-bottom: 5vw;
}
.companyrogo{
margin: 0 auto;
display: block;
width: 30vw;
padding-top: 10vw;
padding-bottom: 10vw;
}
.header_img{
display: block;
width: 100%;
margin: 0 auto;	
margin-bottom: 10vw;
}
	
/********************
*********************
******navigtion******
*********************
*********************/
.menu-btn {
position: fixed;
top: 10px;
left: 10px;
display: flex;
height:40px;
width: 40px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #000;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 1px;
width: 23px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color:rgba(255,255,255,0.9);
transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
left: 0;/*メニューを画面内へ*/
}
	
/********************
*********************
******navigtion******
*********************
*********************/
.nav-list{
padding-top: 25vw;
width: 95vw;
margin: 0 auto;
display: block;
}
.nav-item{
text-align: center;
padding-right: 0vw;
padding-bottom: 30px;
}
.nav-item:last-of-type{
padding-right: 0px;
}
.nav-item>a{
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 4vw;
color:#4f4b4a;
}
.hover:hover {
opacity: 0.4;
color: #4f4b4a;
}
/********************
*********************
*******section********
*********************
*********************/
.sectionbox{
width: 100%;
margin: 0 auto;
}
h1{
width: 100%;
margin: 0 auto;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 4vw;
text-align: center;
color: #000;
margin-bottom: 10vw;
line-height: 6vw;
}
h2{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 4vw;
color: #000;
padding-bottom: 8vw;
text-align: center;
}
h4{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3vw;
line-height:1.4em;
color: #000;
margin-bottom: 10vw;	
text-align: left;
}
.cap{
font-size: 2.5vw;
padding-top: 15px;
letter-spacing: -0.1em;	
}
.box_ul{
width: 90%;
margin: auto;
display : block;
justify-content:space-between; 
}
.li_box{
width: 100%;
margin: auto;
margin-bottom: 20vw;
text-align: center;
}
.recovery{
width:50vw;
margin: auto;
margin-bottom: 10vw;
}
.buy_btn{
margin: 0 auto;
margin-top: 5vw;
margin-bottom: 3vw;
width: 95%;
text-align: center;
color: #fff;
padding-top: 5vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 4vw;
background-color: #000;
padding-bottom: 5vw;
border-radius: 100vh;
}

.component_ul{
width: 100%;
margin: 0 auto;
margin-bottom: 5vw;
}
.ex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ex.osusume{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 5vw;
}
.ex_text{
width: 75%;
font-size: 3vw;
line-height:1.3em;
color: #3f3533;
letter-spacing: 0.1vw;	
text-align: justify;
margin-right: 0%;
margin-bottom: 5vw;
}
.component_li{
position: relative;
width: 30%;
background-color:#00000;
margin-bottom: 4vw;
margin-right: 5%;
}
.component_li:last-of-type{
margin-right: 0%;
}
.component_li::before {
content: "";
display: block;
padding-bottom: 100%;
}

.component_li_osusume{
position: relative;
width:100%;
margin: 0 auto;
height:440vw;
border: solid 1px #00000;
border-radius: 3vw;
margin-bottom: 3vw;
}
.component_li_osusumetitle{
text-align: center;	
color: #3f3533;
font-weight:normal;
font-size: 4vw;
padding-top: 10vw;
}
.component_li_osusumetext{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #3f3533;
font-weight:normal;
font-size: 3vw;
padding-top: 5vw;
line-height: 1.7em;
}
.component_li_text{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight:normal;
font-size: 3vw;
line-height:4vw;
letter-spacing: 0.1vw;
color: #fff;
}
.osusume01{
float: left;
width: 48%;
margin: 0 auto;
height: 15vw;
line-height: 5vw;
background-color: #00000;
margin-right: 2vw;
text-align: center;
border-radius: 10vw;
font-size: 3.5vw;
padding-top: 4vw;
padding-bottom:0vw;
letter-spacing: 0.1vw;
color: #fff;
}
.component_li_osusumeph{
width: 90%;
margin:  0 auto;
margin-top: 3vw;
}
.img001{
position: absolute;
width: 35%;
top:18vw;
left: 0vw;
right: 0vw;
margin: 0 auto;
}
.img002{
position: absolute;
width: 40%;
top:17vw;
left: 0vw;
right: 0vw;
margin: 0 auto;
}
.mornigph{
display: block;
float: left;
width: 48%;
padding-right: 2vw;
margin-bottom:5vw;
}
.mornigph_02{
display: block;
float: left;
width: 48%;
margin-bottom: 1vw;
}
.osusume01:last-of-type{
margin-right: 0vw;
}
	
	
.component_li_osusumetext_test{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #3f3533;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size:3vw;
padding-top: 50vw;
line-height: 1.7em;
}
	
	
.component_li_osusumetext_test_02{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #3f3533;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3vw;
padding-top: 0vw;
line-height: 1.7em;
}
.test_tx{
padding-top: 5vw;	
	
}

.test_tx_text{
padding-top: 2vw;	
	
}
	
/*******************
********************
*********表*********
********************
********************/
.box_text{
width: 80vw;
margin: 0 auto;
margin-top: 10vw;
}
.testtitle{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-size:4vw;
text-align: center;
color: #3f3533;
font-weight:normal;
margin-bottom: 6vw;
}
table{
margin: 0 auto;

width: 80vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
border-collapse: collapse;
margin-bottom: 10vw;
}
table th{
color: #3f3533;
background: #B3A8A6;
border: solid 1px #3f3533;
padding-top: 1.5vw;
padding-bottom: 1.5vw;
padding-left: 1vw;
padding-right: 1vw;
font-size: 3vw;
text-align: center;
}
table td{
color: #3f3533;
background: #fff;
padding-top: 2vw;
padding-bottom: 2vw;
padding-left: 1vw;
padding-right: 1vw;
font-size: 3vw;
line-height: 1.5em;
border: solid 1px #3f3533;
}



/*******************
********************
******footer******
********************
********************/

.footerbottom{
width:100%;
background-color: #000;
text-align: center;
}
.img23{
width: 30vw;
padding-top: 30vw;
}
.address p{
padding-top: 10vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3vw;
color: #fff;
line-height:5vw;
}
.address.sub{
padding-top: 3vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 2vw;
color: #fff;
line-height:3vw;
}
.img24{
padding-top: 15vw;
width: 8vw;
}
.img25{
width: 8vw;
}
.copyright{
padding-top: 5vw;
padding-bottom: 2vw;
width: 100%;
text-align: center;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size:2vw;
color: #fff;
}
}