﻿@charset "UTF-8";
#mainimg_area h1 {font-size:1px; line-height:1; padding:0; margin:0;}

#sele_crs {text-align:center;}

#sele_crs .title_black {color:#555;}
#sele_crs .bg_white {background-color:#FFF;}
#sele_crs .bg_gray01 {background-color:#f8f7f6;}
#sele_crs .bg_pink {background-color:#ffe3f1;}

#sele_crs .align_left {text-align:left;}
#sele_crs .align_center {text-align:center;}
#sele_crs #sele_crs_container01 {padding:50px 20px 130px 20px;}
#sele_crs .lay_inner01 {max-width:980px; padding:60px 40px 40px 40px; margin:0 auto;}
#sele_crs .lay_inner02 {max-width:980px; padding:20px 40px; margin:0 auto;}
#sele_crs .lay_inner03 {max-width:980px; padding:30px; margin:0 auto;}
#sele_crs .lay_inner04 {padding:60px 40px 40px 40px;}
#sele_crs .lay_inner05 {padding:20px 30px;}
#sele_crs .lay_inner06 {padding:50px 30px 30px 30px;}

#sele_crs .lay_left {float:left;}
#sele_crs .lay_right {float:right;}
#sele_crs .lay_left_abso {float:left;}
#sele_crs .lay_right_abso {float:right;}

#sele_crs h2 {padding:40px 0; background:url(images/h2_line.gif) center bottom no-repeat; margin-bottom:50px;}
#sele_crs h3 {color:#FFF; font-size:20px; font-size:2.0rem; font-weight:normal; display:inline-block; padding:12px 50px; margin-bottom:60px; background-color:#42b9d1;}
#sele_crs h4 {color:#f79dc9; line-height:2; padding-bottom:40px;}
#sele_crs .lay_inner02 h4 { padding-bottom:10px;}
#sele_crs p {text-align:left; font-size:14px; font-size:1.4rem; line-height:2.2;}
#sele_crs p.age_comment {font-size:13px; font-size:1.3rem; line-height:1.8; color:#705e48;}

#sele_crs .link_btn_v2 a,
#sele_crs .link_btn_v2 a:visited,
#sele_crs .link_btn_v2 a:hover {height:38px;}

#sele_crs #sele_crs_overview {padding-top:130px; padding-bottom:170px;}
#sele_crs #sele_crs_overview h2 {color:#42b9d1; font-weight:normal; padding:0 0 50px 0; background:none; margin-bottom:0;}
#sele_crs #sele_crs_overview p {font-size:17px; font-size:1.7rem; line-height:3; text-align:center; padding-bottom:50px;}
#sele_crs_navi_area {}
#sele_crs_navi_area ul {font-size:0;}
#sele_crs_navi_area ul li {display:inline-block; max-width:180px; margin:0 3.7%;}

#sele_crs .h3typetitle {padding:16px; background-color:#42b9d1; text-align:center;}
#sele_crs .h3typetitle h3 {font-weight:bold; display:inline-block; padding:0; margin-bottom:8px;}
#sele_crs .h3typetitle p {color:#FFF; line-height:1; text-align:center;}

#sele_crs h4.h4typetitle {padding:0; padding-bottom:14px; text-align:left;}
#sele_crs h4.h4typetitle .h4typetitle_type {color:#25a2da; padding:6px 26px; margin-bottom:16px; font-weight:normal; border:2px solid #25a2da; margin-right:20px; display:inline-block;}
#sele_crs h4.h4typetitle .h4typetitle_name {color:#555; font-size:24px; font-size:2.3rem; margin-bottom:16px; display:inline-block;}
#sele_crs .type_left_col {width:39.5%;}
#sele_crs .type_right_col {width:55%;}
#sele_crs .type_right_col p {line-height:1.7; padding-bottom:40px;}
#sele_crs .type_right_col p span.type_anno {font-size:12px; font-size:1.2rem; padding-top:20px; display:block;}
#sele_crs .type_right_col .link_btn_area {margin:0; padding-bottom:40px; max-width:400px;}
#sele_crs .type_right_col .link_btn_area .link_btn_v2 { max-width:400px;}
#sele_crs .type_right_col .link_btn_area .link_btn_v2 a,
#sele_crs .type_right_col .link_btn_area .link_btn_v2 a:visited,
#sele_crs .type_right_col .link_btn_area .link_btn_v2 a:hover {width:400px;}
#sele_crs .type_right_col .lay_inner05 h5 {padding-bottom:20px;}
#sele_crs .type_right_col .lay_inner05 h5 img {width:auto; max-width:100%;}
#sele_crs .type_right_col .lay_inner05 ul {text-align:left;}
#sele_crs .type_right_col .lay_inner05 ul li {font-size:15px; font-size:1.5rem; font-weight:bold; min-height:30px; text-align:left; background:url(https://apricastorage.blob.core.windows.net/images/specialpage/select_childseat/type_li_icon.png ) left top no-repeat; padding:2px 0 10px 26px;}
#sele_crs #type_junior_lead {padding:0 20px 60px 20px;}
#sele_crs #type_junior_lead p {font-size:20px; font-size:2.0rem; font-weight:bold; text-align:center;}
#sele_crs #type_junior_area {}
#sele_crs .type_junior_col {width:48%;}
#sele_crs .type_junior_inner {}
#sele_crs .type_junior_inner .type_left_col {}
#sele_crs .type_junior_inner .type_left_col img {padding-bottom:30px;}
#sele_crs .type_junior_inner .type_right_col {}

#sele_crs #knowledge_col {}
#sele_crs #knowledge_col #knowledge_leftcol {width:51%; padding-bottom:20px;}
#sele_crs #knowledge_col #knowledge_leftcol h4 {padding-bottom:20px;}
#sele_crs #knowledge_col #knowledge_leftcol p {padding-bottom:40px;}
#sele_crs #knowledge_col #knowledge_leftcol img {padding-bottom:20px;}
#sele_crs #knowledge_col #knowledge_rightcol {width:42%; padding-bottom:20px;}
#sele_crs #knowledge_col #knowledge_rightcol img {padding-bottom:40px;}

#sele_crs p#crs_agegraph_lead {font-size:16px; font-size:1.6rem; line-height:2; font-weight:bold; padding-bottom:50px;}
#sele_crs #crs_agegraph {/*padding:0 0 40px 0;*/ margin-bottom: 40px;}
#sele_crs #crs_agegraph #crs_agegraph_img {width:auto; max-width:100%;}

/* graph animation */
#sele_crs #crs_agegraph {position: relative;}
#sele_crs #crs_agegraph .agegraph_yaji {
  position: absolute;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  width: 9.625%;  width: calc(77 / 800 * 100%);
  -webkit-transform: scaleY(0); transform: scaleY(0);
}
#sele_crs #crs_agegraph .agegraph_yaji.active {
  -webkit-transform: scaleY(1); transform: scaleY(1);
}
#sele_crs #crs_agegraph .agegraph_yaji1 {
  left: 31.5%; left: calc(252 / 800 * 100%);
  top: 41.33333333%;  top: calc(248 / 600 * 100%);
  -webkit-transition: transform 0.6s ease; transition: transform 0.6s ease;
}
#sele_crs #crs_agegraph .agegraph_yaji2 {
  left: 55.25%; left: calc(442 / 800 * 100%);
  top: 1.5%; top: calc(9 / 600 * 100%);
  -webkit-transition: transform 0.6s ease 0.5s; transition: transform 0.6s ease 0.5s;
}
#sele_crs #crs_agegraph .agegraph_yaji3 {
  left: 80%; left: calc(640 / 800 * 100%);
  top: 1.5%; top: calc(9 / 600 * 100%);
  -webkit-transition: transform 0.6s ease 1.0s; transition: transform 0.6s ease 1.0s;
}
#sele_crs #crs_agegraph .agegraph_yaji img{max-width: 100%; width: auto;}
/* // graph animation */


/* graph animation02 */
#sele_crs #crs_agegraph02 {/*padding:0 0 40px 0;*/ margin-bottom: 40px;}
#sele_crs #crs_agegraph02 #crs_agegraph_img {width:auto; max-width:100%;}
#sele_crs #crs_agegraph02 {position: relative;}
#sele_crs #crs_agegraph02 .agegraph_yaji {
  position: absolute;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  width: 9.625%;  width: calc(77 / 800 * 100%);
  -webkit-transform: scaleY(0); transform: scaleY(0);
}
#sele_crs #crs_agegraph02 .agegraph_yaji.active {
  -webkit-transform: scaleY(1); transform: scaleY(1);
}
#sele_crs #crs_agegraph02 .agegraph_yaji01 {
  left: 26%;;
  top: 71.33333333%;  top: calc(428 / 600 * 100%);
  -webkit-transition: transform 0.6s ease; transition: transform 0.6s ease;
}
#sele_crs #crs_agegraph02 .agegraph_yaji02 {
  left: 44%; left: calc(352 / 800 * 100%);
  top: 41.33333333%;  top: calc(248 / 600 * 100%);
  -webkit-transition: transform 0.6s ease 0.4s; transition: transform 0.6s ease 0.4s;
}
#sele_crs #crs_agegraph02 .agegraph_yaji03 {
  left: 64%; left: calc(500 / 800 * 100%);
  top: 1.5%; top: calc(9 / 600 * 100%);
  -webkit-transition: transform 0.6s ease 0.8s; transition: transform 0.6s ease 0.8s;
}
#sele_crs #crs_agegraph02 .agegraph_yaji04 {
  left: 80%; left: calc(640 / 800 * 100%);
  top: 1.5%; top: calc(9 / 600 * 100%);
  -webkit-transition: transform 0.6s ease 1.2s; transition: transform 0.6s ease 1.2s;
}
#sele_crs #crs_agegraph02 .agegraph_yaji img{max-width: 100%; width: auto;}
/* // graph animation */



#sele_crs #comp_movie_area {width:100%; padding:0;}
#sele_crs .comp_movie_col {width:48.4%; padding:30px 30px 22px 30px;}
#sele_crs .comp_movie_col h4 {padding-bottom:20px;}
#sele_crs .comp_movie_col p {line-height:1.8;}
#sele_crs p.comp_anno {line-height:1.8; text-align:center; padding:40px 0 60px 0;}
#sele_crs .comp_movie {height:0; width:100%; padding-top:56.3333%; margin-bottom:20px;}

#sele_crs .safety_lay {padding-bottom:80px;}
#sele_crs .safety_imgcol {width:44.4%;}
#sele_crs .safety_concol {width:52%;}
#sele_crs .safety_concol .imgbox {padding-top:20px;}
#sele_crs .safety_concol .imgbox img {width:auto; max-width:100%;}

#sele_crs #crs_list_area {padding:100px 20px;}
#sele_crs #crs_list_area .link_btn_v2 {max-width:480px; background:url(images/btn_crslist_arrow.png) right center no-repeat #df0623;
border-radius:20px;
-webkit-border-radius:20px;/* for Safari and Chrome */
-moz-border-radius:20px; /* for Firefox */
-o-border-radius:20px; /* for opera */
behavior: url('../../../common/border-radius.htc');/* for IE */
}
#sele_crs #crs_list_area .link_btn_v2 a,
#sele_crs #crs_list_area .link_btn_v2 a:visited,
#sele_crs #crs_list_area .link_btn_v2 a:hover {width:480px; height:94px; font-size:24px; font-size:2.4rem;}

#sele_crs .mrbot20 {margin-bottom:20px;}
#sele_crs .mrbot30 {margin-bottom:30px;}
#sele_crs .mrbot100 {margin-bottom:100px;}
#sele_crs .pabotno {padding-bottom:0;}

@media screen and (max-width: 769px) {
#sele_crs #sele_crs_overview {padding-top:80px; padding-bottom:80px;}
#sele_crs #sele_crs_overview h2 {padding-bottom:30px;}
#sele_crs #sele_crs_overview p {font-size:14px; font-size:1.4rem; line-height:2.6; padding-bottom:40px;}
#sele_crs_navi_area ul li {max-width:26%; margin:0 3.6%;}
#sele_crs .h3typetitle h3 {font-size:18px; font-size:1.8rem;}
}

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

#sele_crs .type_junior_col.lay_left,
#sele_crs .type_junior_col.lay_right {width:100%; float:none; margin-bottom:30px;}

}

/*!------------------------------------*\
    Smartphone
\*!------------------------------------*/
@media screen and (max-width: 641px) {
#sele_crs #sele_crs_container01 {padding:30px 10px 60px 10px;}

#sele_crs .lay_inner01 {padding:30px 20px 20px 20px;}
#sele_crs .lay_inner02 {padding:20px 20px;}
#sele_crs .lay_inner03 {padding:10px;}
#sele_crs .lay_inner04 {padding:30px 20px 20px 20px;}
#sele_crs .lay_inner05 {padding:16px 20px;}
#sele_crs .lay_inner06 {padding:30px 20px 20px 20px;}

#sele_crs .lay_left,#sele_crs .lay_right {float:none;}

#sele_crs h2 {padding:30px 0 20px 0; background:url(images/h2_line_sp.gif) center bottom no-repeat; margin-bottom:40px;}
#sele_crs h3 {font-size:18px; font-size:1.8rem; padding:12px 20px; margin-bottom:30px; display:block;}
#sele_crs h4 {line-height:1.6;}
#sele_crs .lay_inner02 h4 {font-size:17px; font-size:1.7rem;}

#sele_crs #sele_crs_overview {padding-top:60px; padding-bottom:60px;}
#sele_crs #sele_crs_overview p {line-height:2;}
#sele_crs_navi_area ul li {max-width:30%; margin:0 2.5%;}
#sele_crs_navi_area ul li.sele_crs_navi01 {margin-left:0;}
#sele_crs_navi_area ul li.sele_crs_navi03 {margin-right:0;}

#sele_crs h4.h4typetitle {text-align:center;}
#sele_crs h4.h4typetitle .h4typetitle_type {font-size:16px; font-size:1.6rem; padding:4px 25px; margin-bottom:12px; margin-right:0; display:inline-block;}
#sele_crs h4.h4typetitle .h4typetitle_name {font-size:18px; font-size:1.8rem; margin-bottom:12px; display:block;}
#sele_crs .type_left_col,
#sele_crs .type_right_col {width:100%;}
#sele_crs .type_left_col img {width:70%; max-width:260px; padding-bottom:30px;}
#sele_crs .type_right_col .link_btn_area {margin:0 auto;}
#sele_crs #type_junior_lead {padding:0 20px 30px 20px;}
#sele_crs #type_junior_lead p {font-size:16px; font-size:1.6rem; line-height:1.6;}

#sele_crs #knowledge_col #knowledge_leftcol,
#sele_crs #knowledge_col #knowledge_rightcol {width:100%;}

#sele_crs p#crs_agegraph_lead {font-size:14px; font-size:1.4rem; padding-bottom:50px;}

#sele_crs .comp_movie_col {width:100%; padding:20px; margin-bottom:20px;}
#sele_crs p.comp_anno {padding:0 0 60px 0;}

#sele_crs .safety_lay {padding-bottom:60px;}
#sele_crs .safety_lay h4 {padding-bottom:18px;}
#sele_crs .safety_imgcol,#sele_crs .safety_concol {width:100%;}
#sele_crs .safety_imgcol {padding-bottom:20px;}

#sele_crs #crs_list_area {padding:60px 20px;}
#sele_crs #crs_list_area .link_btn_v2 {max-width:480px;}
#sele_crs #crs_list_area .link_btn_v2 a,
#sele_crs #crs_list_area .link_btn_v2 a:visited,
#sele_crs #crs_list_area .link_btn_v2 a:hover {width:480px; height:64px; font-size:18px; font-size:1.8rem;}

#sele_crs .mrbot30 {margin-bottom:20px;}
#sele_crs .mrbot100 {margin-bottom:40px;}
#sele_crs .pabotno {padding-bottom:0;}
}
