@charset "utf-8";
/* CSS Document */



/* 共通 */
* { zoom:1; }
html,body { margin:0; padding:0; font-size:16px; line-height:180%; font-family: "M PLUS 1p"; }
header,footer,div,article,section,p,span,a,ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none; box-sizing:border-box; }
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }
form,fieldset,input,textarea { margin:0; padding:0; border:0; outline:none; }
img { margin:0; padding:0; height:auto; vertical-align:bottom; border:none; }
table,tr,td { margin:0; padding:0; border-collapse:collapse; border-spacing:0; box-sizing:border-box; }
th { margin:0; padding:0; font-weight:normal; text-align:left; box-sizing:border-box; }
a:link { color:#000; text-decoration:none; transition: 0.5s; }
a:visited { color:#000; text-decoration:none; }
a:hover { color:#0071bc; text-decoration:none; }
a:active { color:#0071bc; text-decoration:none; }
a:hover img.alpha_button { opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; }
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }


.btn-grad { transition: 0.5s; background-size: 200% auto; color: #fff !important; border-radius: 30px; display: block; }
.btn-grad:hover { background-position: right center; }
.btn-grad a { color: #fff !important; }
.btn-grad:hover { opacity:1; }





/* ヘッダー */
@media screen and (min-width: 901px) and (max-width: 5000px) {
header .btn-grad { background-image: linear-gradient(to right, #36d1dc 0%, #16a085 51%, #36d1dc 100%); padding: 10px; width: 100%; min-width: 200px; text-align: center; }
header { margin: 0 auto; padding: 15px 0; width: 90%; max-width: 1380px; }
header dl { display: flex; justify-content: space-between; align-items: center; }
header dt { width: 30%; max-width: 253px; }
header dt img { width: 100%; }
header dd { width: 70%; }
header ul { display: flex; justify-content: flex-end; align-items: center; }
header li { margin: 0 0 0 8%; }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
header .btn-grad { background-image: linear-gradient(to right, #36d1dc 0%, #16a085 51%, #36d1dc 100%); padding: 10px; text-align: center; }
header { margin: 0 auto; padding: 15px 0; width: 90%; }
header dl { display: flex; justify-content: space-between; align-items: center; }
header dt { width: 25%; max-width: 253px; }
header dt img { width: 100%; }
header dd { width: 75%; }
header ul { display: flex; justify-content: flex-end; align-items: center; }
header li { margin: 0 0 0 5%; }
header li:last-child { width: 30%; }
}
@media screen and (min-width: 1px) and (max-width: 600px) {
header .btn-grad { background-image: linear-gradient(to right, #36d1dc 0%, #16a085 51%, #36d1dc 100%); padding: 10px; text-align: center; }
header { margin: 0 auto; padding: 15px 0; width: 90%; }
header dl { display: flex; justify-content: space-between; align-items: center; }
header dt { width: 45%; max-width: 130px; }
header dt img { width: 100%; }
header dd { width: 45%; }
header li { display: none; }
header li:last-child { display: block; }
}



/* フッター */
@media screen and (min-width: 901px) and (max-width: 5000px) {
footer { margin: 70px 0; text-align: center; }
footer .tel dl { display: flex; justify-content: center; align-items: flex-end; text-align: left; }
footer .tel dd { margin: 0 0 0 10px; }
footer .tel p { margin: 15px 0 0 0; font-size: 50px; }
footer .tel a:hover { color: #000; }
footer .home { margin: 70px 0 0 0; font-size: 20px; }
footer .home a { color: #0071bc; text-decoration: underline; }
footer .home a:hover { color: #000; }
footer .copyright { margin: 70px 0 0 0; font-size: 12px; }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
footer { margin: 70px 0; text-align: center; }
footer .tel dl { display: flex; justify-content: center; align-items: flex-end; text-align: left; }
footer .tel dd { margin: 0 0 0 10px; }
footer .tel p { margin: 15px 0 0 0; font-size: 50px; }
footer .tel a:hover { color: #000; }
footer .home { margin: 70px 0 0 0; font-size: 20px; }
footer .home a { color: #0071bc; text-decoration: underline; }
footer .home a:hover { color: #000; }
footer .copyright { margin: 70px 0 0 0; font-size: 12px; }
}
@media screen and (min-width: 1px) and (max-width: 600px) {
footer { margin: 70px 5%; text-align: center; }
footer .tel dl { display: flex; justify-content: center; align-items: flex-end; text-align: left; }
footer .tel dt img { width: 40px; }
footer .tel dd { margin: 0 0 0 10px; }
footer .tel p { margin: 15px 0 0 0; font-size: 30px; }
footer .tel a:hover { color: #000; }
footer .home { margin: 70px 0 0 0; font-size: 18px; }
footer .home a { color: #0071bc; text-decoration: underline; }
footer .home a:hover { color: #000; }
footer .copyright { margin: 70px 0 0 0; font-size: 12px; }
}




/* コンテンツ */
@media screen and (min-width: 901px) and (max-width: 5000px) {
.box_01 { margin: 0 auto; width: 90%; max-width: 1380px; background:url(images/page1_01.jpg) no-repeat right top; }
.box_01 dl { display: flex; justify-content: space-between; }
.box_01 dt { padding: 225px 0 0 15px; width: 40%; font-size: 20px; }
.box_01 dd { padding: 410px 15px 0 0; width: 60%; text-align: right; }
.box_01 dd img { width: 100%; max-width: 647px; }
.box_02 { margin: 120px auto 0 auto; width: 90%; max-width: 1380px; }
.box_02 h3 { font-size: 30px; text-align: center; }
.box_02 .small { display: block; margin: 15px 0 0 0; font-size: 16px; font-weight: normal;text-align: center; }
.box_02 ul { display: flex; flex-wrap: wrap; margin: 0 0 0 -3.333%; }
.box_02 li { margin: 50px 0 0 3.333%; width: 30%; }
.box_02 img { width: 100%; }
.box_02 li p { margin: 10px 0 0 0; line-height: 120%; }
.box_03 { margin: 70px 0 0 0; padding: 70px 0; background: #f2f2f2; }
.box_03 .cell { margin: 0 auto; width: 90%; max-width: 1380px; }
.box_03 h3 { font-size: 30px; }
.box_03 dl { display: flex; margin: 20px 0 0 0; }
.box_03 dt { width: 100px; text-align: center; }
.box_03 dd { flex: 1; padding: 30px 0 0 0; }
.box_03 ul { display: flex; margin: 20px 0; }
.box_03 li:first-child { width: 50%; max-width: 628px; }
.box_03 li:last-child { margin: 0 0 0 3px; width: 50%; max-width: 609px; }
.box_03 li img { width: 100%; }
.box_03 .btn-grad { background-image: linear-gradient(to right, #36d1dc 0%, #5b86e5 51%, #36d1dc 100%); margin:20px 0 0 0; padding: 10px; width: 420px; text-align: center; }
.box_04 { display: flex; justify-content: flex-end; margin: 90px auto 0 auto; width: 90%; max-width: 1380px; background:url(images/page1_11.jpg) no-repeat left top; }
.box_04 dl { padding: 80px 0 0 0; width: 461px; }
.box_04 dt { padding: 80px 0 0 0; height: 360px; text-align: center; background:url(images/page1_12.png) no-repeat left top; }
.box_04 h3 { margin: 0 0 20px 0; font-size: 30px; text-align: center; }
.box_04 p { display: inline-block; text-align: left; }
.box_04 dd { margin: -30px 0 0 0; text-align: center; }
.box_05 { padding: 70px 0; background: #f2f2f2; }
.box_05 .cell { margin: 0 auto; width: 90%; max-width: 1380px; }
.box_05 h3 { font-size: 30px; }
.box_05 dl { display: flex; margin: 20px 0 0 0; }
.box_05 dt { width: 100px; text-align: center; }
.box_05 dd { flex: 1; padding: 30px 0 0 0; }
.box_05 ul { display: flex; margin: 20px 0; }
.box_05 li:first-child { width: 50%; max-width: 627px; }
.box_05 li:last-child { margin: 0 0 0 3px; width: 50%; max-width: 612px; }
.box_05 li img { width: 100%; }
.box_05 .btn-grad { background-image: linear-gradient(to right, #ff2a54 0%, #ff931e 51%, #ff2a54 100%); margin:20px 0 0 0; padding: 10px; width: 420px; text-align: center; }

.sp { display: none; }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
.box_01 { margin: 0 auto; background:url(images/page1_01.jpg) no-repeat right top; }
.box_01 dt { padding: 150px 0 0 5%; font-size: 20px; }
.box_01 dd { padding: 70px 15px 0 0; text-align: right; }
.box_01 dd img { width: 100%; max-width: 647px; }
.box_02 { margin: 120px auto 0 auto; width: 90%; }
.box_02 h3 { font-size: 30px; text-align: center; }
.box_02 .small { display: block; margin: 15px 0 0 0; font-size: 16px; font-weight: normal;text-align: center; }
.box_02 ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
.box_02 li { margin: 50px 0 0 0; width: 45%; }
.box_02 img { width: 100%; }
.box_02 li p { margin: 10px 0 0 0; line-height: 120%; }
.box_03 { margin: 70px 0 0 0; padding: 70px 0; background: #f2f2f2; }
.box_03 .cell { margin: 0 auto; width: 90%; }
.box_03 h3 { font-size: 30px; }
.box_03 dl { display: flex; margin: 20px 0 0 0; }
.box_03 dt { width: 100px; text-align: center; }
.box_03 dd { flex: 1; padding: 30px 0 0 0; }
.box_03 ul { display: flex; margin: 20px 0; }
.box_03 li:first-child { width: 50%; max-width: 628px; }
.box_03 li:last-child { margin: 0 0 0 3px; width: 50%; max-width: 609px; }
.box_03 li img { width: 100%; }
.box_03 .btn-grad { background-image: linear-gradient(to right, #36d1dc 0%, #5b86e5 51%, #36d1dc 100%); margin:20px 0 0 0; padding: 10px; width: 380px; text-align: center; }
.box_04 { display: flex; justify-content: flex-end; margin: 90px 0 0 0; background:url(images/page1_11.jpg) no-repeat left top; }
.box_04 dl { padding: 80px 2.5% 0 0; width: 461px; }
.box_04 dt { padding: 80px 0 0 0; height: 360px; text-align: center; background:url(images/page1_12.png) no-repeat left top; }
.box_04 h3 { margin: 0 0 20px 0; font-size: 30px; text-align: center; }
.box_04 p { display: inline-block; text-align: left; }
.box_04 dd { margin: -30px 0 0 0; text-align: center; }
.box_05 { padding: 70px 0; background: #f2f2f2; }
.box_05 .cell { margin: 0 auto; width: 90%; }
.box_05 h3 { font-size: 30px; }
.box_05 dl { display: flex; margin: 20px 0 0 0; }
.box_05 dt { width: 100px; text-align: center; }
.box_05 dd { flex: 1; padding: 30px 0 0 0; }
.box_05 ul { display: flex; margin: 20px 0; }
.box_05 li:first-child { width: 50%; max-width: 627px; }
.box_05 li:last-child { margin: 0 0 0 3px; width: 50%; max-width: 612px; }
.box_05 li img { width: 100%; }
.box_05 .btn-grad { background-image: linear-gradient(to right, #ff2a54 0%, #ff931e 51%, #ff2a54 100%); margin:20px 0 0 0; padding: 10px; width: 380px; text-align: center; }

.sp { display: none; }
}
@media screen and (min-width: 1px) and (max-width: 600px) {
html,body { font-size: 14px; }

.box_01 { margin: 0 auto; background:url(images/page1_01.jpg) no-repeat right top; background-size: auto 500px; }
.box_01 dl { margin: 0 auto; width: 95%; }
.box_01 dt { padding: 70px 0 0 0; font-size: 16px; }
.box_01 dd { padding: 70px 0; text-align: right; }
.box_01 dd img { width: 100%; max-width: 647px; }
.box_02 { margin: 80px auto 0 auto; width: 90%; }
.box_02 h3 { font-size: 24px; text-align: center; }
.box_02 .small { display: block; margin: 15px 0 0 0; font-size: 16px; font-weight: normal; text-align: center; }
.box_02 ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
.box_02 li { margin: 25px 0 0 0; width: 48%; }
.box_02 img { width: 100%; }
.box_02 li p { margin: 10px 0 0 0; line-height: 120%; }
.box_03 { margin: 70px 0 0 0; padding: 50px 0; background: #f2f2f2; }
.box_03 .cell { margin: 0 auto; width: 90%; }
.box_03 h3 { font-size: 24px; }
.box_03 dl { display: flex; margin: 20px 0 0 0; }
.box_03 dt { width: 10%; }
.box_03 dt img { width: 80%; max-width: 36px; }
.box_03 dd { flex: 1; padding: 15px 0 0 0; }
.box_03 ul { margin: 20px 0; }
.box_03 li:first-child { max-width: 628px; }
.box_03 li:last-child { margin: 15px 0 0 3px; max-width: 609px; }
.box_03 li img { width: 100%; }
.box_03 .btn-grad { background-image: linear-gradient(to right, #36d1dc 0%, #5b86e5 51%, #36d1dc 100%); margin:20px 0 0 0; padding: 10px; width: 100%; text-align: center; }
.box_04 { margin: 90px 0 0 0; background:url(images/page1_11.jpg) no-repeat center center; }
.box_04 dl { margin: 0 auto; padding: 80px 0 0 0; width: 90%; max-width: 461px; }
.box_04 dt { padding: 50px 5%; text-align: center; background:url(images/page1_12.png) no-repeat left top; background-size: 100% 100%; }
.box_04 h3 { margin: 0 0 20px 0; font-size: 24px; text-align: center; }
.box_04 p { display: inline-block; text-align: left; }
.box_04 dd { margin: -30px 0 0 0; text-align: center; }
.box_04 dd img { width: 100%; }
.box_05 { padding: 50px 0; background: #f2f2f2; }
.box_05 .cell { margin: 0 auto; width: 90%; }
.box_05 h3 { font-size: 24px; }
.box_05 dl { display: flex; margin: 20px 0 0 0; }
.box_05 dt { width: 10%; }
.box_05 dt img { width: 80%; max-width: 36px; }
.box_05 dd { flex: 1; padding: 15px 0 0 0; }
.box_05 ul { margin: 20px 0; }
.box_05 li:first-child { max-width: 627px; }
.box_05 li:last-child { margin: 15px 0 0 3px; max-width: 612px; }
.box_05 li img { width: 100%; }
.box_05 .btn-grad { background-image: linear-gradient(to right, #ff2a54 0%, #ff931e 51%, #ff2a54 100%); margin:20px 0 0 0; padding: 10px; width: 100%; text-align: center; }

.pc { display: none; }
}





[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}