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

	
/****************************** BREAK POINT *******************************
PC Layout
******************************* BREAK POINT ******************************/


.cnt_vi01 {
    height: 194px;
}
.section_dna {
    padding-top: 5.571em;
}
.ttl_dna_01 {
    margin-bottom: 2.857em;
}
.clm_dna_01a .inner {
    background: url(/-/Media/com/learn-more/eyecare2020/myopia/crocetin/img-dna01.png) no-repeat right 1% top 42%;
    background-size: 33.5106%;
}
.clm_dna_01a .txt_wrap_01{
    margin-bottom: 4em;
	letter-spacing: -0.3px;
}
.clm_dna_01a .btn-02 a {
    font-size: 	1.286em;
	padding-top: 0.65em;
    padding-bottom: 0.55em;
}
.clm_dna_01a .btn-02 {
    width: 30.143em;
    margin: 0 auto 7.143em;
    text-align: center;
    display: block;
}
.clm_dna_01b {
    padding-top: 5.714em;
}
.clm_dna_01b .inner {
    display: flex;
    align-items: center;
}
.ttl_dna_02 {
	float: left;
    width: 30em;
}
.clm_dna_01b .txt_wrap_01 {
    margin-left: 4.4681%;
    width: 49.2553%;
}
.clm_dna_01b .txt_chuui {
    margin-bottom: 0;
    text-align: right;
}

/*クロセチンとは？*/

.section_about {
    padding-top: 7.143em;
}
.cnt_txt_wrap_about_01 {
    width: 46.8085%;
    float: left;
}
.cnt_txt_wrap_about_02 {
    width: 47.0213%;
    float: right;
}
.clm_about_01 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 9.286em;
}
.clm_about_01:nth-child(even){
    display: flex;
    flex-direction:row-reverse;
    align-content: center;
}
.img_about_01__txt{
    flex-direction: 0 0 100%;
    font-size: 20px;
    margin-top: 50px;
}
.img_about_01 {
    width: 51.1702%;
    text-align: center;
}
.ttl_about_01 {
    width: 17.929em;
    margin-bottom: 2.857em;
}
.txt_about_01 .txt-01 {
    background-size: auto;
}
.txt_about_03 {
    width: 51.0638%;
}
.ttl_about_02 {
    width: 19em;
    margin-bottom: 2.857em;
}
.clm_about_01 .txt_wrap_01 p:last-child {
    margin-bottom: 0;
}
/*
	たとえば、こんな食品に
	クロセチンが含まれている
*/
.clm_about_02 {
    background: #dbdced;
    padding-top: 5em;
    padding-bottom: 4.286em;
}
.ttl_about_03 {
    margin-bottom: 3.571em;
    text-align: center;
}
.txt_about_04 {
    text-align: center;
    margin-bottom: 1.714em;
}
.txt_about_04-2{
    font-size: 20px;
    max-width: 900px;
    margin: 0 auto 3em;
}
.clm_about_02 .txt_chuui {
    text-align: right;
}


/*
	クロセチンの近視進行抑制効果(tablet)
*/
.section_restrain {
    padding-top: 8.929em;
}
.ttl_restrain_01 {
    width: 34.5em;
    margin: 0 auto 5.714em;
}

.clm_restrain_01a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.clm_restrain_01 {
    margin-bottom: 7.786em;
}

.txt_restrain_01 {
    width: 51.0638%;
    padding: 0 4.1667%;
    box-sizing: border-box;
}

.img_restrain_01 {
    width: 47.0213%;
}
.img_restrain_02 {
    margin-bottom: 2.857em;
	text-align: center;
}
.clm_restrain_01 .txt_chuui {
    text-align: right;
}
/*
	クロセチンの働き
*/
.clm_work{
    padding: 9em 0 0;
}
.clm_work .ttl_work{
    width: 266px;
    margin: 0 auto 52px;
}
.clm_work .img_work{
    text-align: center;
    margin-bottom: 3em;
}

.kassei_ttl{
    text-align: center;
    margin-bottom: 5em;
}

@media screen and (max-width: 940px) {
.cnt_vi01 {
    overflow: hidden;
}
}

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


}
@media screen and (min-width: 769px) {
/*受診(PCのみ)*/
.section_clinic {
	border-top:1px solid #dbdced;
	padding: 81px 0;
}
.clinic_ttl {
	text-align: center;
	margin-bottom: 58px;
}
.section_clinic > .inner-03 {
	background: url("/-/Media/com/learn-more/eyecare2020/myopia/top/img-clinic01-pc.png") no-repeat left 100px top 160px;
}
.clinic_copy {
	line-height: 1.9444em;
	margin-bottom: 1.5em;
	margin-left: 480px;
	font-size: 1.286em;
	padding-right: 9px;
}
.supervision_clm {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #cccccc;
	font-size: 1.143em;
	padding: 17px 53px 17px 28px;
	width: 408px;
	margin-left: 480px;
	box-sizing: border-box;
}
.supervision_clm .ttl {
	display: flex;
	align-items: center;
	border-right: 1px solid #cccccc;
	padding-right: 28px;
}
.supervision_clm .cont {
	display: block;
	padding-left: 28px;
}
.supervision_clm .cont .name {
	font-size: 1.375em;
}

}