/*	fadein */
.fadein {-webkit-animation:fadeIn 2s ease 0s 1 normal;animation:fadeIn 2s ease 0s 1 normal;}

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

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

/*
font-family:
 'Kosugi Maru', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Train One', sans-serif;
font-family: 'M PLUS 1p', sans-serif;
*/

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

img{max-width:100%;height:auto;vertical-align: bottom;}

.clearfix::after{content: "";display: block;clear: both;}
.main a {text-decoration: none;}
html {font-size:62.5%;}
body {font-size:1.4rem;}
.clearfix::after {content:'';display:block;clear:both;}
.camHeader {border-bottom: 1px solid #ccc;margin-bottom: 5px;}
.camHeader p {max-width: 960px;margin: 0 auto;}
.e87logo img {max-width: 310px;}
.navitopicpath_ {max-width: 960px;margin: 0 auto;font-size: 0.9em;}
.navitopicpath_ > span a {background: url(//img.e87.com/img/usr/s/topicpath_bg.gif) right center no-repeat;padding-right: 16px;}

/*header */
p.header_txt {background: #06c755;text-align: center;color: #fff;font-family: 'Kosugi Maru', sans-serif;font-size: 36px;margin-top: 20px;}
.header h1 {max-width: 100%;margin: 10px auto 0;text-align: center;}
p.line_friend {margin: 30px auto;text-align: center;}
/*navi */
.cam_navi {text-align: center;display: flex;justify-content: center;align-items: center;max-width: 940px;margin: 0 auto;}
.cam_navi a:first-child {margin-left: 0;}
.cam_navi a {width: 24%;border: 1px solid #ccc;margin-left: 1%;position: relative;background: #fff;box-sizing: border-box;}
.cam_navi a:before {content: " ";display: block;position: absolute;right: -1px;bottom: -1px;border-width: 0 12px 12px 0;border-style: solid;width: 0;-webkit-transform: rotate(90deg);transform: rotate(90deg);border-color: #fff #fff #ccc #fff;z-index: 1;background: #fff;}
.cam_navi a li {text-align: center;padding: 10px 0;color: #ff4d67;font-size: 22px;font-family: 'Noto Serif JP', serif;}
/*application */
section#application {background: #ffecf4;margin-top: 40px;padding: 20px 10px;}
article.main {max-width: 960px;margin: 0 auto;}
.application_h2 {text-align: center;color: #333333;font-family: 'Noto Serif JP', serif;font-size: 33px;font-weight: 600;padding: 0 0 5px;max-width: 960px;margin: 0 auto;}
.h2_txt {text-align: center;color: #fff;font-family: 'Noto Serif JP', serif;font-size: 28px;font-weight: 600;padding: 3px 0 1px;max-width: 960px;margin: 0 auto;background: #ff4d67;line-height: 40px;margin: 40px 0 30px;}
.application_txt {padding: 0px 10px 30px;font-size: 16px;color: #584323;text-align: center;line-height: 1.5;transform: rotate(0.03deg);font-family: 'M PLUS 1p', sans-serif;}
.application_txt a {text-decoration: underline;}
.step_outer {margin: 0 auto;max-width: 960px;display: flex;}
.step_outer dl {width: 23%;position: relative;padding: 0 1%;}
.step_outer dt {font-family: 'Nova Cut', sans-serif;text-align: center;font-size: 36px;color: #aaaaaa;}
.step_outer dl dd {text-align: center;}
.step_outer dl dd.step_icon {min-height: 115px;}
.step_outer dl dd.step_txt {font-size: 16px;margin: 15px 0;line-height: 1.4;transform: rotate(0.03deg);font-family: 'M PLUS 1p', sans-serif;font-weight: 600;transform: rotate(0.03deg);}
span.step_txt_span {color: #ff0c74;font-weight: 600;}
/*osusume */
.osusume_box {float: left;width: 23%;padding: 1%;}
.osusume_outer.mother {max-width: 960px;margin: 15px 1%;background: #ffedf5;padding: 5px 1%;}
.osusume_outer.father {max-width: 960px;margin: 15px 1%;background: #f4f6fd;padding: 5px 1%;}
.osusume_outer div .icon {display: flex;padding: 0 0 2px;}
.osusume_outer div .icon p.icon_mother {width: 69px;height: 17px;text-align: center;font-family: 'Kosugi Maru', sans-serif;background: #96293d;color: #fff;font-size: 12px;border-radius: 3px;margin-right: 2px;padding-top: 3px;}
.osusume_outer.mother div dl dt a {font-size: 14px;font-weight: bold;color: #d12954;line-height: 1.2;padding-top:2px;transform: rotate(0.03deg);font-family: 'M PLUS 1p', sans-serif;}
.osusume_outer div dd.price {font-size: 12px;}
.osusume_outer div .icon p.icon_father {width: 69px;height: 17px;text-align: center;font-family: 'Kosugi Maru', sans-serif;background: #0e1953;color: #fff;font-size: 12px;border-radius: 3px;margin-right: 2px;padding-top: 3px;}
.osusume_outer.father div dl dt a {font-size: 14px;font-weight: bold;color: #0e1953;line-height: 1.2;padding-top:2px;transform: rotate(0.03deg);font-family: 'M PLUS 1p', sans-serif;}
/* point */
dl.point_list {margin: 30px 2%;;display: flex;flex-wrap: wrap;}
dl.point_list dd {width: calc(99% - 14em);margin-top: 7px;line-height: 1.7;font-size: 15px;margin-bottom: 20px;color:#422b30;}
dl.point_list dt {width: 14em;margin: 0px 2% 20px 0;}
.osusume_outer div dt {max-width: 220px;padding-top: 5px;}
dl.point_list dt span {font-size: 18px;font-weight: 600;border: 1px solid #ccc;display: block;font-family: 'Noto Serif JP', serif;padding: 3px 0 2px 10px;color:#422b30;}
dl.point_list dd a {text-decoration: underline;}
/* attention */
section#attention h2 {margin-bottom: 20px;}
section#attention {max-width: 960px;margin: 0 auto 30px;}
section#attention h3 {background: linear-gradient(transparent 50%, #ffcfe3 0%);font-size: 19px;display: inline;padding: 0 4px;}
p.attention_txt1 {padding: 16px 20px 0px 30px;line-height: 1.7;text-indent: -1em;}
p.attention_top40 {padding-top: 40px;}
p.attention_bottom40 {padding-bottom: 40px;}
section#selection_bnr {max-width: 960px;margin: 0 auto 26px;}
ul.bnr_img {display: flex;margin: 0 20px;}
ul.bnr_img li {margin: 10px 20px;}
.camFooter { padding: 20px 0 10px; width: 100%; border-top: #e5ddda 1px solid; text-align: center; }
.camFooter ul { margin-bottom: 10px; text-align: center; font-size: 0; }
.camFooter ul li { display: inline-block; color: #705252; font-size: 1.4rem; }
.camFooter ul li a { color: #705252; }
.camFooter ul li:after { content: '｜'; }
.camFooter ul li:last-child:after { content: ''; }
.camFooter p{ text-align: center; }
.camFooter p small { color: #401f1f; font-size: 1.0rem; }
@media screen and (max-width: 960px) { .step_outer dl dd.step_txt {font-size: min(3.5vw, 15px);white-space: nowrap;}
.step_outer dl dd.step_txt.tep_txt_small {font-size: 14px;}
}
@media screen and (min-width: 681px) { 
.SP_ttl {display: none;}
}
@media screen and (max-width: 680px) { 
.PC_ttl{display: none;}
.SP_ttl{display: block;}
.camHeader p {padding: 10px 20% 7px;}
.e87logo img {max-width: 100%;}
.navitopicpath_ {padding: 0 5px 5px;}
.navitopicpath_ > span a{font-size:11px;}
.navitopicpath_ > span{font-size:11px;}
h1.PC_ttl,p.header_txt,p.header_txt2 {display: none;}
p.line_friend {margin: 20px 3%;}
.cam_navi {width: 98%;padding: 0 1%;}
.cam_navi {text-align: center;display: flex;justify-content: space-evenly;align-items: center;max-width: 940px;margin: 0 auto;flex-wrap: wrap;}
.cam_navi a {width: 45%;margin: 6px 0;}
.cam_navi a li {font-size: min(4.4vw, 18px);}
section#application {margin-top: 25px;padding: 15px 3%;}
.application_h2 {font-size: 26px;}
.h2_txt {font-size: 26px;padding: 3px 0 1px;margin: 35px 0 20px;}
.application_txt {text-align: left;font-size: 14px;padding: 0 0 20px;}
.step_outer {display: block;}
.step_outer dl {float: left;width: 46%;padding: 0 2%;}
.step_outer dl dd.step_txt.tep_txt_smal {font-size: min(3.5vw, 15px);}
.step_outer dl.step3 {clear: both;}
.step_outer dt {font-size: 32px;}
.step_outer dl dd.step_icon{min-height: 90px;}
dd.step_icon img {max-height: 90px;width: auto;}
.step_outer:after {content: "";display: block;clear: both;}
.osusume_outer.mother, .osusume_outer.father {max-width: 100%;margin: 15px auto;padding: 5px 1%;display: flex;flex-wrap: wrap;justify-content: center;}
.osusume_box {width: 47%;max-width: 220px;padding: 10px 1.5%;}
.osusume_outer div dd.price {font-size: 12px;}
dl.point_list {width: 100%;margin: 10px auto;display: block;}
dl.point_list dt {margin: 15px 2% 5px;width: 96%;}
dl.point_list dt span {font-size: 16px;font-weight: 600;border: 1px solid #ccc;display: block;font-family: 'Noto Serif JP', serif;padding: 2px 0 0px 8px;width: 10em;}
dl.point_list dd {width: 94%;margin: 8px 3%;line-height: 1.4;font-size: 14px;}
section#attention h3 {margin: 10px 2% 0;display: block;}
p.attention_txt1 {padding: 10px 10px 0px 25px;line-height: 1.4;text-indent: -13px;font-size: 13px;}
ul.bnr_img {display: block;margin: 0 20px;}
.camFooter ul {margin: 0 1% 10px;}
.camFooter ul li, .camFooter p {font-size: 1.2rem;padding-bottom: 5px;}
}