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

/*------------------------------------------------------------------

@color
#333333  :   maintext

@z-index
999999  :   .modalBox
99999   :   .hamburger
9999    :   .globalNav_sp

@media
@media screen and (min-width:751px) and ( max-width:1200px)
@media only screen and (max-width: 750px)

------------------------------------------------------------------*/

/*
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; }
body {
font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
font-size: 1.8rem;
line-height: 1.5em;
color: #333;
}
.sans-serif{
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}
*/


.clearfix::after {
content: '';
display: block;
clear: both;
}

main h1 {
margin-bottom: 40px;
width: 100%;
height: 60px;
line-height: 60px;
font-size: 1.4rem;
text-align: center;
color: #fff;
background-color: #4367ed;
border-radius: 6px;
}
main p {
font-size: 1.0rem;
line-height: 1.6rem;
}
a:hover {
opacity: 0.7;
}
@media only screen and (max-width: 600px) {
body {
font-size: 1.6rem;
}
main h1 {
padding: 10px 20px;
width: 100%;
height: auto;
line-height: normal;
font-size: 1.2rem;
text-align: center;
}
}

/* PC / SP
------------------------------------ */
.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 600px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* SP image
------------------------------------ */
@media only screen and (max-width: 750px) {
main img { max-width: 100%; }
}

/* BOX
------------------------------------ */

main {
padding: 60px 0;
}
.inner {
margin: auto;
width: 1000px;
}
@media only screen and (max-width: 600px) {
.inner { width: 90%; }
}

/* header
------------------------------------ */
.logo {
width: 100%;
height: 60px;
}
.logo .inner {
margin: auto;
padding: 0 20px;
width: 1000px;
height: 100%;
}
.logo ul {
width: 100%;
height: 100%;
display: flex;
flex-flow: nowrap;
justify-content: space-between;
}
.logo ul li {
width: 50%;
height: 100%;
}
.logo ul li:nth-child(1) img {
margin-top: 6px;
}
.logo ul li:nth-child(2) {
text-align: right;
}
.logo ul li:nth-child(2) img {
margin-top: 21px;
/* width: 150px; */
height: 18px;
}
.mv {
margin-bottom: 40px;
width: 100%;
height: 360px;
background-image: url("../images/mv_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.mv p {
text-align: center;
}
.mv p img {
margin-top: 80px;
}
@media screen and (min-width:601px) and ( max-width:999px) {
.mv {
background-image: none;
}
.mv .inner {
width: 1000px;
height: 100%;
background-image: url("../images/mv_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
@media screen and (max-width: 600px) {
.logo .inner {
padding: 0 10px;
width: 100%;
}
.logo ul li:nth-child(1) img {
margin-top: 15px;
width: 70px;
height: 30px;
}
.logo ul li:nth-child(2) img {
margin-top: 24px;
width: 100px;
height: 12px;
}
.mv {
height: auto;
background-image: none;
}
.mv .sp,
.mv .sp img {
width: 100%;
}
.mv p img {
margin-top: 0;
}
}

/* global nav - PC
------------------------------------ */
/*
.globalNav_pc ul {
display: flex;
justify-content: space-between;
border-left: 1px solid #333;
}
.globalNav_pc ul li {
width: calc(100%/6);
height: 40px;
text-align: center;
border-right: 1px solid #333;
transition: 0.5s;
}
.globalNav_pc ul li:hover {
background-color: #ccc;
}
.globalNav_pc ul li a {
color: #333;
line-height: 40px;
display: block;
text-decoration: none;
}
.globalNav_pc ul li.current a {
background-color: #ccc;
}
*/

/* global nav - SP
------------------------------------ */
/*
.globalNav_sp { display: none; }

@media screen and (max-width: 750px) {
.globalNav_sp {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.9);
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow-y: auto;
}
.globalNav_sp ul {
padding: 70px 20px 0;
width: 100%;
}
.globalNav_sp ul li {
margin: 16px auto 0;
width: 100%;
height: 40px;
}
.globalNav_sp ul li:first-child {
margin-top: 0;
}
.globalNav_sp ul li a {
line-height: 40px;
color: #fff;
font-size: 1.8rem;
text-decoration: none;
border-bottom: 1px solid #8e8e8e;
display: block;
}
}
*/

/* content
------------------------------------ */

.link {
margin-bottom: 80px;
padding: 50px 0;
background-color: #eee;
text-align: center;
}
.link a {
margin: auto;
width: 450px;
height: 64px;
line-height: 64px;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #df5726;
display: block;
background-image: url("../images/arrow.png");
background-repeat: no-repeat;
background-position: right 20px center;
border-radius: 6px;
}
@media screen and (max-width: 600px) {
.link {
margin-bottom: 80px;
padding: 50px 0;
background-color: #eee;
text-align: center;
}
.link a {
margin: auto;
padding: 20px 60px 20px 20px;
width: 90%;
height: auto;
text-align: left;
line-height: normal;
font-size: 1.6rem;
}
}


/* section01 */
.section01 p {
padding: 30px 30px 30px 200px;
background-image: url("../images/illust_01.png");
background-repeat: no-repeat;
background-position: left 30px top;
}
@media screen and (max-width: 600px) {
.section01 p {
padding: 160px 0 20px;
background-position: center top;
}
}

/* section02 */
.section02 h2 {
margin-bottom: 30px;
padding-left: 10px;
width: 100%;
height: 45px;
line-height: 45px;
font-size: 1.6rem;
color: #df5726;
border-left: 10px solid #df5726;
border-bottom: 1px solid #ccc;
}
.section02 ul {
padding: 0 30px;
}
.section02 .q {
margin-bottom: 30px;
padding-left: 60px;
font-weight: bold;
background-image: url("../images/q.png");
background-repeat: no-repeat;
background-position: left top;
}
.section02 .a {
margin-bottom: 40px;
padding: 30px 30px 30px 150px;
background-color: #ffefe9;
background-repeat: no-repeat;
background-position: left 30px center;
}
.section02 .a span {
padding-bottom: 10px;
color: #df5726;
font-weight: bold;
display: inline-block;
}
.section02 ul li:nth-child(1) .a {background-image: url("../images/illust_02.png");}
.section02 ul li:nth-child(2) .a {background-image: url("../images/illust_03.png");}
.section02 ul li:nth-child(3) .a {background-image: url("../images/illust_04.png");}
@media screen and (max-width: 600px) {
.section02 ul {
padding: 0;
}
.section02 .a {
padding: 180px 20px 20px;
background-position: center top 20px;
}
}

/* section03 */
.section03 ul {
margin-bottom: 40px;
padding: 0 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section03 ul li {
margin-bottom: 20px;
width: 300px;
border-radius: 6px;
box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.3);
}
.section03 ul li h2 {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background-color: #df5726;
border-radius: 6px 6px 0 0;
}
.section03 ul li p {
padding: 0 20px 20px;
}
.section03 ul li p img {
border-bottom: 1px solid #999;
}
@media screen and (max-width: 600px) {
.section03 ul {
padding: 0;
justify-content: center;
}
.section03 ul li {
margin-bottom: 20px;
width: 100%;
max-width: 300px;
border-radius: 6px;
box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.3);
}
}

/* section04 */
.section04 p {
padding: 30px 30px 80px 300px;
background-image: url("../images/illust_05.png");
background-repeat: no-repeat;
background-position: left 30px top;
}
.section04 p a {
margin-top: 20px;
width: 480px;
height: 64px;
line-height: 64px;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #df5726;
display: block;
background-image: url("../images/arrow.png");
background-repeat: no-repeat;
background-position: right 20px center;
border-radius: 6px;
}
@media screen and (max-width: 600px) {
.section04 p {
padding: 220px 0 0;
background-position: center top;
}
.section04 p a {
padding: 20px 60px 20px 20px;
width: 100%;
height: auto;
font-size: 1.8rem;
text-align: left;
line-height: normal;
}
}

/* section05 */
.section05 p {
margin-bottom: 30px;
padding: 0 30px;
text-align: center;
}
.section05 p img {
margin-bottom: 30px;
}
.section05 ul {
padding: 30px 30px 10px 30px;
background-color: #eee;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section05 ul li {
margin-bottom: 20px;
width: 300px;
height: 64px;
}
.section05 ul li a {
width: 300px;
height: 64px;
line-height: 64px;
font-size: 1.0rem;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #df5726;
display: block;
background-image: url("../images/arrow.png");
background-repeat: no-repeat;
background-position: right 20px center;
border-radius: 6px;
}
@media screen and (max-width: 600px) {
.section05 p {
padding: 0;
}
.section05 ul {
padding: 20px 20px 0;
justify-content: center;
}
.section05 ul li {
margin-bottom: 20px;
width: 100%;
}
.section05 ul li:nth-child(6) {
display: none;
}
.section05 ul li a {
margin: auto;
padding-left: 20px;
width: 100%;
max-width: 360px;
text-align: left;
}
}


/* section06 */
.section06 p {
margin-bottom: 30px;
padding: 0 30px;
text-align: center;
}
.section06 .cap {
margin: 0 20px;
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
margin-top: 40px;
line-height: 1.2em;
font-size: 1.0rem;
text-align: left;
}
.section06 .cap span {
font-weight: bold;
}
@media screen and (max-width: 600px) {
.section06 p {
padding: 0;
text-align: left;
}
.section06 .cap {
margin: 0;
}
}


/* footer - PC/SP
------------------------------------ */
footer .inner {
margin-top: 60px;
padding: 60px 0;
text-align: center;
font-size: 12px;
border-top: 5px double #EA5404;
}
footer .inner p img {
width: 100%;
max-width: 284px;
}
@media screen and (max-width: 600px) {
footer .inner {
margin: 60px auto;
width: 90%;
}
}


/* other
------------------------------------ */


/* js
------------------------------------ */

/* js-modal */
.js-modal,
.js-modal-close {
cursor: pointer;
}
.modalBox {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.9);
position: fixed;
top: 0;
left: 0;
z-index: 999999;
display: none;
}
.modalContent {
width: 60%;
height: 60%;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.js-modal-close {
width: 40px;
height: 40px;
display: block;
position: absolute;
top: -50px;
right: 0;
}
.js-modal-close::before,
.js-modal-close::after {
content: '';
width: 100%;
height: 2px;
display: block;
background-color: #fff;
position: absolute;
top: 50%;
left: 0;
}
.js-modal-close::before { transform: rotate(45deg);}
.js-modal-close::after { transform: rotate(-45deg);}