@charset "UTF-8";
/* CSS Document クロセチンページ*/



/****************************** BREAK POINT *******************************
タブレット Layout
******************************* BREAK POINT ******************************/
@media screen and (max-width: 768px) {


.section_vi_bg {
    background: none;
}
.cnt_vi01 {
    height: auto;
}

/*近視の進行と抑制にかかわる、遺伝子に注目*/
.section_dna {
    padding-top: 12.3698vw;
}
.ttl_dna_01 {
    margin-bottom: 9.7656vw;
}
.ttl_dna_01 img {
    width: 72.5260vw;
}
.clm_dna_01a .inner {
    background: url(/-/Media/com/learn-more/eyecare2020/myopia/crocetin/img-dna01.png) no-repeat right  top 11.0677vw;
    background-size: 56.901vw;
}
.clm_dna_01a .txt_wrap_01 {
    margin-bottom: 2em;
}
.clm_dna_01a .btn-02 a {
    font-size: 4.6875vw;
	text-align: left;
}
.clm_dna_01a .btn-02 {
    width: 84.6354vw;
    margin: 0 auto 19.7917vw;
}
.clm_dna_01b {
    padding-top: 12.6302vw;
}
.clm_dna_01b .inner {
    display: block;
}
.clm_dna_01b .txt_wrap_01 {
    margin-left: 0;
    width: 100%;
}
.ttl_dna_02 {
	float: none;
    width: 80.0781vw;
    margin: 0 auto 7.1615vw;
}
.clm_dna_01b .txt_wrap_01 {
    margin-left: 0;
    width: 100%;
}

.clm_dna_01b .txt_chuui {
    text-align: right;
}


/*クロセチンとは？*/
.section_about {
    padding-top: 15.2344vw;
}
.ttl_about_01 {
    width: 45.5729vw;
    margin: 0 auto;
}
.ttl_about_02 {
    width: 48.1771vw;
    margin: 0 auto;
}
.ttl_about_01,
.ttl_about_02 {
    margin-bottom: 9.5052vw;
}
.img_about_01 {
    width: 61.1979vw;
    margin: 0 auto;
}
.clm_about_01 {
    display: block;
	margin-bottom: 18vw;
}
.cnt_txt_wrap_about_01 {
    float: none;
    width: 100%;
}
.cnt_txt_wrap_about_02 {
    width: 100%;
}
.img_about_01__txt{
    font-size: 3.6458vw;
    margin-top: 4em;
    line-height: 2;
}

.clm_about_01:nth-child(even) {
    display: block;
}
.txt_about_01{
    margin-bottom: 5.859vw;
}
.txt_about_03 {
    width: 79.4271vw;
    margin: 0 auto;
}
.ttl_about_03 {
    text-align: left;
}

/*
	たとえば、こんな食品に
	クロセチンが含まれている
*/
.clm_about_02 {
    background: #dbdced;
    padding-top: 10.2865vw;
    padding-bottom: 8.4635vw;
}
.ttl_about_03 {
    margin-bottom: 9.7656vw;
}
.ttl_about_03 img {
    width: 57.9427vw;
}
.txt_about_04 {
    width: 79.1667vw;
    margin-left: 3.5156vw;
    margin-bottom: 4.6875vw;
}
.txt_about_04-2{
    font-size: 3.6458vw;
    line-height: 2;
    margin-bottom: 2em;
}
.clm_about_02 .txt_chuui {
    text-align: right;
}

/*
	クロセチンの働き
*/
.clm_work{
    padding: 15.2344vw 0 0;
}
.clm_work .ttl_work{
    width: 45.5729vw;
    margin: 0 auto 7vw;
}
.clm_work .img_work{
    text-align: center;
    margin-bottom: 3em;
}

/*
	クロセチンの近視進行抑制効果(tablet)
*/
.ttl_restrain_01 {
    width: 87.5vw;
    margin: 0 auto 9.7656vw;
}
.section_restrain {
    padding-top: 19.5313vw;
}
.clm_restrain_01 {
    margin-bottom: 0;
}
.clm_restrain_01a {
    display: block;
}
.txt_restrain_01 {
    width: 100%;
    padding: 0;
}
.img_restrain_01 {
    padding-top: 6.7708vw;
    margin-bottom: 14.5833vw;
    width: 79.5573vw;
    margin: 0 auto 14.5833vw;
}

.img_restrain_02 {
    width: 85.3352%;
    margin: 0 auto 12.1094vw;
}
.clm_restrain_01 .txt_chuui {
    text-align: right;
}

.kassei_ttl{
    margin-bottom: 9.7656vw;
}





}
/****************************** BREAK POINT *******************************
SP Layout
******************************* BREAK POINT ******************************/
@media screen and (max-width: 480px) {


}


@media screen and (max-width: 768px) {
/*受診(TABLET、SP)*/
#restrain {
    padding-bottom: 21.2604vw;
}
.section_clinic {
	border-top:1px solid #dbdced;
	padding: 13.672vw 0;
	background: url("/-/Media/com/learn-more/eyecare2020/myopia/top/img-clinic01-sp.png") no-repeat;
	background-size: contain;
}
.clinic_ttl {
	width: 61.849vw;
	margin: 0 auto 20.443vw;/* margin-bottom: 58px; */
}
.clinic_copy {
	font-size: 3.646vw;
	line-height: 6.38vw;
	margin-bottom: 6.51vw;
}
.supervision_clm {
	display: flex;
	flex-wrap: nowrap;
	border: 1px solid #cccccc;
	font-size: 0.8888em;
	padding: 3.906vw 11.849vw 3.906vw 6.641vw;/* width: 91.146vw; */
}
.supervision_clm .ttl {
	display: flex;
	align-items: center;
	border-right: 1px solid #cccccc;
	padding-right: 6.38vw;
	font-size: 3.646vw;
	white-space: nowrap;
}
.supervision_clm .cont {
	display: block;
	padding-top: 0.6vw;
	padding-left: 6.38vw;
	font-size: 3.646vw;
}
.supervision_clm .cont .name {
	font-size: 4.948vw;
}
}