@charset "UTF-8";
/* Custom */
h1 span { position: relative; padding: .5em .7em .4em; border-bottom: 3px solid #2d284a; }
h1 span::before,
h1 span::after { position: absolute; left: 30px; bottom: -15px; width: 30px; height: 15px; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; }
h1 span::before { background-color: #2589d0; }
h1 span::after { background-color: #fff; bottom: -11px; }
h1 { margin: 60px 1%; }
h2 span { position: relative; padding: .5em 1.2em .5em 1.5em; }
h2 span::before { position: absolute; transform: translateY(-50%); width: 12px; height: 12px; border: 2px solid #2d284a; display: inline-block; content: ''; }
h2 span::after { position: absolute; transform: translateY(-50%); width: 12px; height: 12px; border: 2px solid #2589d0; display: inline-block; content: ''; }
h2 span::before { top: calc(50% - 3px); left: 0; }
h2 span::after { top: calc(50% + 3px); left: 5px; }
h2 { margin: 60px 1% 40px; }
#container2 h1 span::after { background-color: #e3eeb2; }
#btn a { background-color: #4c4a67; width: 50%; margin: 45px 21%; }
#clum3 ul:nth-child(1) { width: 25%; }
#clum3 ul:nth-child(2) { width: 27%; }
#clum3 ul:nth-child(3) { width: 35%; }

/* PC用 */
@media only screen and (min-width: 1001px) {
#container2 #main #fours_culm { width: 21%; margin: 0 0.5% 3%; padding: 1% 1% 0; }
}

/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {
#container2 #main #fours_culm { width: 21%; margin: 0 0.5% 3%; padding: 1% 1% 0; }
}

/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {
}

/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
h1 { font-size: 150%; margin: 30px 0; }
h2 { font-size: 140%; margin: 20px 0; }
h3 { font-size: 130%; margin: 0; }
h1 span { position: relative; padding: .5em 0 .4em; }
h2 span { position: relative; padding: .5em 0 .5em; }
}

/* Mobile2用 */
@media screen and (max-width: 540px) {
h1 { font-size: 150%; margin: 30px 0; }
h2 { font-size: 140%; margin: 20px 0; }
h3 { font-size: 130%; margin: 0; }
h1 span { position: relative; padding: .5em 0 .4em; }
}

/* pickup */
#pickup { width: 100%; overflow: hidden; margin: 0; padding: 0; display: block; }
#pickup h1 { text-align: center; letter-spacing: 0.2em; margin: 60px 0; padding: 0; }
#pickup h2 { margin: 34px 0 22px; }
#pickup #check ul { background: url(../common/data_img/pickup_1.png) right 10px center no-repeat; }
#pickup #check ul li { width: 75%; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {
#pickup #check ul li { width: 65%; }
}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#pickup #check ul { background: transparent; width: 82%; margin: 20px 5% 0; }
#pickup #check ul li { width: 91%; }
}
/* Mobile2用 */
@media screen and (max-width: 540px) {
#pickup #check ul { background: transparent; width: 82%; margin: 20px 5% 0; }
#pickup #check ul li { width: 91%; }
}

/* concept */
#concept { width: 100%; overflow: hidden; margin: 0; padding: 0; display: block; }
#concept h1 { text-align: center; letter-spacing: 0.2em; margin: 60px 0; padding: 0; }
#concept h2 { margin: 34px 0 22px; }
#concept #two_culm { border: 1px solid #4c4a67;}
#concept #btn a { width: 76%; margin: 15px 8%; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {}
/* Mobile2用 */
@media screen and (max-width: 540px) {}

/* method */
#method { width: 100%; overflow: hidden; margin: 0; padding: 0; display: block; }
#method h1 { text-align: center; letter-spacing: 0.2em; margin: 60px 0; padding: 0; }
#method h1 span::after { background-color: #e3eeb2; }
#method h2 { margin: 34px 0 22px; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {}
/* Mobile2用 */
@media screen and (max-width: 540px) {}

/* jibunjiku */
#jibunjiku { width: 100%; overflow: hidden; margin: 0; padding: 0; display: block; }
#jibunjiku h1 { text-align: center; letter-spacing: 0.2em; margin: 60px 0; padding: 0; }
#jibunjiku h1 span::before { background-color: #fff; }
#jibunjiku h1 span::after { background-color: #71c0bb; bottom: -11px; }
#jibunjiku h2 { margin: 34px 0 22px; }
#jibunjiku #three_culm { background: #fff; color: #585858; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {}
/* Mobile2用 */
@media screen and (max-width: 540px) {}