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

.open,.open02,.open03,.open03_02 {
	margin-top: 30px;
}

.close,.close02,.close03,.close03_02 {
	margin-top: 30px;
	display: none;
}

.a-accshow,.a-accshow02,.a-accshow03,.a-accshow03_02 {
	display: none;
}

#contents{
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.copy{
	font-weight: bold;
	color: #ff5999;
	font-size: 22px;
	line-height: 46px;
	text-align: center;
}

.copy02{
	font-weight: bold;
	color: #313145;
	font-size: 22px;
	line-height: 46px;
	text-align: center;
	margin-top: -80px;
}

.kawashima{
	margin-top: 30px;
}

.yellow_line{
		background:linear-gradient(transparent 50%, #ffe500 0%) ;
}

.bold{
	font-weight: bold;
}

#fotter{
	text-align: center;
	margin: 50px;
}

ul.sns {
    width: 100%;
	margin-top: 50px;
	margin-bottom: 30px;
	text-align: center;
}
ul.sns li {
    display: inline-block;
    width: 20%;
}
ul.sns li:nth-child(2) {
	margin: 0 4%;
}
.sns_icon.facebook_back {
    position: relative;
}

/*-------------------------
|                         |
|  レスポンシブCSS        |
|  PC用（767px以上）  　　|
|
-------------------------*/

@media screen and (min-width:767px){



	#wrapper{
		margin: 0 auto;
		width: 1000px;
		background: white;
		box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
	}

	.fixed img{
		width: 870px;
		height: 144px;
		position: fixed;
		left: 50%;
		margin-left: -435px;
		bottom: 0;
		z-index: 100;
	}

	.fv {
		width: 1000px;
		height: auto;
		background: url(../images/bg01.png) no-repeat 0 0;
		background-size: contain;
	}

	.fv img {
		width: 1000px;
	}
	
	.copy{
	font-size: 21px;
}
	

	.lead01 {
		margin-top: 38px;
		margin-bottom: 50px;
	}

	.profile {
		text-align: center;
	}

	.popupModal1 {
		margin: 80px;
	}

	.title01 {
		margin-bottom: 80px;
	}
	
	.section01_text{
		width: 860px;
		margin: 50px auto;
		text-align: left;
		color: #313145;
		font-size: 20px;
		line-height: 48px;
		font-weight: lighter;
	}

	.title02 {
		margin: -20px 0 0 0;
	}

	.title01 img,
	.title02 img {
		width: 100%;
	}

	.point01 img,
	.point02 img,
	.point03 img{
		width: 100%;
	}
	
	.point02 img,
	.point03 img{
		margin-top: 80px;
	}

	.open img,.close img,
	.open02 img,.close02 img,
	.open03 img,.close03 img{
		width: 100%;
	}

	#aisec05 img {
		width: 100%;
	}

	.section01 {
		margin-bottom: 50px;
	}

	.section02_text p {
		font-size: 20px;
		line-height: 48px;
		
		margin: 80px 0 0 0;
	}


	.threestep {
		margin: 160px 0 50px 0;
		text-align: center;
	}

	.lead02{
		margin: 0 0 30px 0;
		text-align: center;
		color: #ff7cb3;
		font-weight: bold;
		font-size: 34px;
	}

	.lead03{
		margin: 80px 0 30px 0;
		text-align: center;
		color: #72b3ff;
		font-weight: bold;
		font-size: 34px;
	}

	.lead04{
		margin: 80px 0 30px 0;
		text-align: center;
		color: #2bb7b7;
		font-weight: bold;
		font-size: 34px;
	}

	.open,.open02,.open03{
		text-align: center;
	}

	.close,.close02,.close03{
		text-align: center;
	}

	.a-accshow,.a-accshow02,.a-accshow03{
		width: 760px;
		margin: 0 auto;
	}

	.section02_text {
		width: 860px;
		font-size: 20px;
		line-height: 50px;
		text-align: left;
/*		margin-top: 20px;
		margin-bottom: 50px;
*/		margin: 20px auto 50px;
	}
	


	

	.grapha01 {
		margin-bottom: 80px;
		text-align: center;
	}

	.grapha01 img,
	.grapha03 img {
		/*width: 100%;*/
	}


	.column {
		text-align: center;
		margin-bottom: 30px;
	}

	
	
	.section02_accordiontext{
		font-size: 20px;
		line-height: 48px;
		color: #313145;
		margin: 50px 0;

	}
	
	.neck{
		margin-top: 80px;
	}
	
	.necktext,.eyetext,.kairotext{
		margin-top: 20px;
	}
	
	.neckdescription,.eyedescription,.kairodescription{
		margin-top: -4px;
	}
	

	.grapha02 {
		margin-bottom: 80px;
		text-align: center;
	}

	.grapha03 {
		margin-bottom: 80px;
		text-align: center;
	}
	
	
	
	.grapha04,.grapha05,.grapha06 {
		margin-bottom: 80px;
		text-align: center;
	}
	
	
	
	
	
	
	.c-02{
		margin: -110px auto 80px;
		font-weight: bold;
		color: #313145;
		font-weight: bold;
		font-size: 22px;
		line-height: 40px;
		text-align: center;
	}

	h5 {
		text-align: left;
		font-size: 29px;
		color: #33b8ff;
		font-weight: bold;
		margin-top: 80px;
	}


	.section03 {
		margin: 80px auto 0;
	}

	.title03_bg {
		height: 840px;
		background: url(../images/bg02.png) repeat-x 0 0;
	}

	.title03 {
		margin: 0 auto;
		text-align: center;
		width: 1000px;
		height: auto;
	}

	.title03 img {
		width: 100%;
	}

	.section03 {
		width: 1000px;
	}

	.section03 .ahiru img {
		width: 100%;
	}

	.section03 .copy {
		margin: -150px auto 80px;
	}
	

	.kotsu {
		text-align: center;
		box-sizing: border-box;
		padding: 50px 0 0 0;
	}

	.btn04 {
		margin-top: -110px;
		text-align: center;
	}

	.ahiru {
		width: 940px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100px;
		text-align: center;
	}

	.pc_wrap {
		background: url(../images/jiritsu_bg.png) repeat-x center top,url(../images/jiritsu_bg.png) repeat-x center bottom, #ff5999;

/*		background: #183e7a;
		background: -moz-linear-gradient(top,  #183e7a 0%, #4e7291 100%);
		background: -webkit-linear-gradient(top,  #183e7a 0%,#4e7291 100%);
		background: linear-gradient(to bottom,  #183e7a 0%,#4e7291 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#183e7a', endColorstr='#4e7291',GradientType=0 );
*/		/*background-attachment: fixed;*/
	}

	.title30_50 img,
	.title60_80 img {
		width: 100%;
	}
	
	
	ul.sns {
    width: 100%;
	margin-top: 50px;
	margin-bottom: 30px;
	text-align: center;
}
ul.sns li {
    display: inline-block;
    width: 10%;
}
	
	p.fbcnt {
    font-size: 0.9em;
    position: absolute;
    top: 34%;
    right: -7%;
    color: #3c5998;
    width: 50px;
    text-align: center;
}


	#fotter {
		margin: 0 !important;
		padding: 50px 0;
	}




	/*↓ポップアップ↓*/
	.popupModal1 > input { /* ラジオボックス非表示 */
		display: none;
	}
	.popupModal1 > input:nth-child(1) + label { 
	    cursor: pointer;
	}
	.modalPopup2 { /* 初期設定 ポップアップ非表示 */
	    display: none;
	}

	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
	    display: block;
	    z-index: 998;
	    position: fixed;
	    width: 90%;
	    border-radius: 20px;
	    left: 50%;
	    top: 50%;
	    margin-top: 30px;
	    -webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);
	    background: #fff;
	    padding: 10px 20px;
	    overflow: hidden;
	}
	@media (min-width: 768px) {/* PCのときはページの真ん中の600x600領域 */
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
	         width: 600px;
	         /*height: 600px;*/
	         padding: 30px;

	    }
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
	     left: 50% !important;
	     top: 54% !important;
	     margin-left: 270px !important;
	     margin-top: -310px !important;
	}
	}

	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
	    overflow:auto;
	    -webkit-overflow-scrolling:touch;
	    display: inline-block;
	    width: 100%;
	    height: 100%;
	}
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
	    width: 100%;
	      height:100%;
	      border:none;
	      display:block;
	}

	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
	max-width: 100%;
	}
	.popupModal1 > input:nth-child(1) + label ~ label {
	    display: none;/* ラジオ１ 以外のラベルを初期は非表示 */

	}
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.70);
	    display: block;
	    position: fixed;
	    left: 0;
	    top: 0;
	    z-index: 997;
	    text-indent: -999999px;
	    overflow: hidden;
	}
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
	    background: rgba(255, 255, 255, 0.5);
	    display: inline-block;
	    position: fixed;
		right: 20px;
	    top: 280px;
	    z-index: 999;
	    width: 44pt;
	    height: 44pt;
	    font-size: 40px;
	    border-radius: 50%;
	    line-height: 44pt;
	    text-align: center;
	    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
	}

	.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
	.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
	    display: none;
	}


	.modalPopup2 {
	    animation: fadeIn 1s ease 0s 1 normal;
	    -webkit-animation: fadeIn 1s ease 0s 1 normal;
	}

	@keyframes fadeIn {
	    0% {opacity: 0}
	    100% {opacity: 1}
	}

	@-webkit-keyframes fadeIn {
	    0% {opacity: 0}
	    100% {opacity: 1}
	}

	.popupModal1 .modalTitle {
	     padding-bottom: 1.2em;
		 text-align: center;
	     margin: .5em 0;
	     border-bottom:
	     1px solid #ccc;
	     font-weight: bold;
	}
	.popupModal1 .modalMain {
	     color:#222;
	     text-align: left;
	     font-size: 22px;
	     line-height: 1.8em;
	}
	/*↑ポップアップ↑*/



	.sp{
		display: none !important;
	}
	.pc{
		display:block !important;
	}



}



/*-------------------------
|                         |
|  レスポンシブCSS        |
|  SP用（767px以下）  　　|
|
-------------------------*/

@media screen and (max-width:766px){

/*	body {
		overflow: hidden;
	}*/

	#wrapper{
		width: 640px;
	}

	#contents{
		text-align: center;
	}
	
	.lead01{
		margin-top: 50px;
	}
	
	.profile{
		margin: 50px 0 80px 0;
	}
	
	.fixed img{
		width: 640px;
		margin: 0 auto;
		position: fixed;
		bottom: -30px;
		z-index: 100;
	}
	
	.section01_text{
		width: 560px;
		margin: 50px auto;
		text-align: left;
		color: #313145;
		font-size: 30px;
		line-height: 60px;
		font-weight: lighter;
	}
	
	.section01 .title01{
		margin: 0 0 60px 0;
	}
	
	.section02 .title02{
		margin: 60px 0 0 0;
	}
	
	.section02_text{
		width: 570px;
		margin: 50px auto;
		text-align: left;
		color: #313145;
		font-size: 30px;
		line-height: 60px;
		font-weight: lighter;
	}
	
	
	
	.section02_accordiontext{
		width: 540px;
		margin: 50px auto;
		text-align: left;
		color: #313145;
		font-size: 30px;
		line-height: 60px;
		font-weight: lighter;
	}
	
	
	
	.threestep{
		margin: 120px 0 45px 0;
	}
	
	.point02 img{
		margin-top: 80px;
	}
	
	.point03 img{
		margin-top: 80px;
	}
		
	
	.g-open{
		margin-top: 30px;
	}
	
	.column{
		text-align: center;
		margin-top: 50px;
	}
	
	.grapha01{
		text-align: center;
		margin: 30px 0 30px 0;
	}
	
	.grapha02{
		text-align: center;
	}
	
	.grapha03{
		text-align: center;
	}
	
	
	.neck{
		margin-top: 80px;
	}
	
	.necktext,.eyetext,.kairotext{
		margin-top: 20px;
	}
	
	.neckdescription,.eyedescription,.kairodescription{
		margin-top: -4px;
	}
	
	
	.grapha04,.grapha05,.grapha06 {
		margin-bottom: 80px;
		text-align: center;
	}
	
	h5 {
		width: 540px;
		text-align: left;
		font-size: 29px;
		color: #33b8ff;
		font-weight: bold;
		margin-top: 80px;
		margin-left: 50px;
	}
	
	.c-02{
		font-weight: bold;
		color: #313145;
		font-size: 22px;
		line-height: 40px;
		text-align: center;
	}
	
	.lead02{
		margin-top: 20px;
		text-align: center;
		color: #ff7cb3;
		font-weight: bold;
		font-size: 50px;
	}
	
	.lead03{
		margin-top: 80px;
		text-align: center;
		color: #72b3ff;
		font-weight: bold;
		font-size: 50px;
	}
	
	.lead04{
		margin-top: 80px;
		text-align: center;
		color: #2bb7b7;
		font-weight: bold;
		font-size: 50px;
	}
	
	h4{
		text-align: center;
		font-weight: bold;
		color: #313145;
		font-size: 30px;
		box-sizing: border-box;
		padding: 10px 0;
	}
	
	
	
	.title03{
		margin-top: 80px;
	}
	
	.section03 .copy{
		margin: -115px 0 0 0;
		line-height: 50px;
	}
	
	.kotsu{
		/*position: relative;*/
		text-align: center;
		margin-top: 50px;
	}

	.btn04 {
		margin-top: -133px;
		text-align: center;
	}
	
	.btn04 img{
		/*margin-top: -133px;*/
		z-index: 1;
/*		position: absolute;
		bottom: 10px;
		left: 50px;
*/	}
	
	.ahiru{
		margin: 100px 0 0 0;
	}

	.ahiru img {
		width: 100%;
	}
	
	p.fbcnt {
    font-size: 1.2em;
    position: absolute;
    top: 28%;
    right: 42%;
    color: #3c5998;
}

	
	#fotter{
		margin-bottom: 300px;
	}
	
	
	/*↓ポップアップ↓*/
	.popupModal1 > input { /* ラジオボックス非表示 */
    display: none;
}
.popupModal1 > input:nth-child(1) + label { 
    cursor: pointer;
}
.modalPopup2 { /* 初期設定 ポップアップ非表示 */
    display: none;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
    display: block;
    z-index: 998;
    position: fixed;
    width: 90%;
    border-radius: 20px;
    left: 50%;
    top: 50%;
    margin-top: 30px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 20px;
    overflow: hidden;
}
@media (min-width: 768px) {/* PCのときはページの真ん中の600x600領域 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
         width: 600px;
         /*height: 600px;*/
         padding: 30px;

    }
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
     left: 50% !important;
     top: 54% !important;
     margin-left: 270px !important;
     margin-top: -310px !important;
}
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
    width: 100%;
      height:100%;
      border:none;
      display:block;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
max-width: 100%;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ１ 以外のラベルを初期は非表示 */

}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
	right: 20px;
    top: 280px;
    z-index: 999;
    width: 44pt;
    height: 44pt;
    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
    display: none;
}


.modalPopup2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.popupModal1 .modalTitle {
     padding-bottom: .5em;
     margin: .5em 0;
     border-bottom:
     1px solid #ccc;
     font-weight: bold;
}
.popupModal1 .modalMain {
     color:#222;
     text-align: left;
     font-size: 30px;
     line-height: 1.8em;
}
/*↑ポップアップ↑*/
	
	.pc{
		display:none !important;
	}
	.sp{
		display:block !important;
	}



}