body {
}
img {
width: 100%;
height: auto;
}

/*mainvisual*/
#mainvisual {
width: 100%;
position: relative;
background-color: #BCD8CE;
margin-top: 0;
padding-top: 39.5%;
padding-bottom: 55px;
}
#mainvisual .mv_wrapper {
width: 83.3%;
position: absolute;
top: 0;
right: 0;
margin-top: -115px;
}
#mainvisual .mv {
}
#mainvisual h1 {
color: #333;
position: absolute;
z-index: 10;
top: 51.2%;
left: -10.1%;
}
#mainvisual h1 span.maintitle {
font-size: 28px;
line-height: 1.8;
background-color: #FFF;
padding: 5px;
font-weight: 100;
letter-spacing: 0.2em;
}
#mainvisual h1 span.subtitle {
font-size: 32px;
line-height: 1.2;
background-color: #FFF;
padding: 5px;
font-weight: 100;
letter-spacing: 0.2em;
}
#mainvisual h1 span {
line-height: 1.2;
background-color: #FFF;
padding: 5px;
font-size: 50px;
letter-spacing: 0.1em;
}
#mainvisual .local_nav {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
#mainvisual .local_nav ul {
display: flex;
}
#mainvisual .local_nav li {
width: 32%;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.1em;
text-align: center;
margin: 0 15px;
}
#mainvisual .local_nav li a {
color: #333;
display: block;
position: relative;
padding: 14px;
}
#mainvisual .local_nav li a.current {
border: 1px solid #FFF;
color: #FFF;
}
#mainvisual .local_nav li a::before {
content: url("../img/ico_arrow_g.svg");
display: block;
position: absolute;
top: 50%;
right: 12%;
transition: 0.5s cubic-bezier(0,.55,.75,1);
transform: translate(0,-50%);
width: 12%;
}
#mainvisual .local_nav li a:hover::before {
transform: translate(20%,-50%);
}
#mainvisual .local_nav li a.current::before {
content: url("../img/ico_down.svg");
display: block;
position: absolute;
top: 50%;
right: 12%;
transform: translate(0,-50%);
width: 4.4%;
}

/*contents*/
#contents_area .index_area {
width: 90%;
max-width:820px; 
margin: 0 auto 80px;
background-color: #F4F5F5;
padding: 35px;
}
#contents_area .index_inner {
display: flex;
}
#contents_area .index_inner h3 {
font-size: 34px;
font-family: 'Dancing Script', cursive;
color: #000;
width: 180px;
}
#contents_area .index_inner li a {
font-size: 16px;
line-height: 1.2;
padding: 5px 5px 5px 20px;
text-decoration: underline;
display: block;
position: relative;
}
#contents_area .index_inner li a:hover {
text-decoration: none;
}
#contents_area .index_inner li a::before {
content: url("../img/ico_down_pk.svg");
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
width: 11px;
}

#contents_area .txt_wrapper {
width: 95%;
max-width: 1000px;
margin: 0 auto 120px;
padding: 50px 0;
background-color: #FFF;
position: relative;
z-index: 10;
}
#contents_area .txt_area {
width: 90%;
max-width: 820px;
margin: 0 auto;
}
#contents_area .txt_area h2 {
font-size: 34px;
line-height: 1.3;
margin-bottom: 40px;
}
#contents_area .txt_area p {
font-size: 16px;
line-height: 1.875;
margin-bottom: 1em;
letter-spacing: 0.1em;
}
#contents_area .nav_wrapper {
width: 90%;
max-width: 820px;
margin: 0 auto;
}
#contents_area .nav_area {
margin: 100px auto;
}
#contents_area .nav_area li {
margin-bottom: 15px;
}
#contents_area .nav_area .to_next li ,
#contents_area .nav_area .to_prev li {
border: 1px solid #333;
}
#contents_area .nav_area .to_next a ,
#contents_area .nav_area .to_prev a {
font-size: 20px;
color: #333;
padding: 15px;
display: block;
text-align: center;
}
#contents_area .nav_area .to_next a span ,
#contents_area .nav_area .to_prev a span {
position: relative;
}
#contents_area .nav_area .to_next a span::after {
content: url("../img/ico_arrow_next.svg");
display: block;
position: absolute;
top: 50%;
right: -110%;
transition: 0.5s cubic-bezier(0,.55,.75,1);
transform: translate(0,-70%);
width: 100px;
}
#contents_area .nav_area .to_next a:hover span::after {
transform: translate(15%,-70%);
}
#contents_area .nav_area .to_prev a span::after {
content: url("../img/ico_arrow_prev.svg");
display: block;
position: absolute;
top: 50%;
left: -110%;
transition: 0.5s cubic-bezier(0,.55,.75,1);
transform: translate(0,-70%);
width: 100px;
}
#contents_area .nav_area .to_prev a:hover span::after {
transform: translate(-15%,-70%);
}
#contents_area .nav_area .to_top a {
font-size: 14px;
color: #333;
padding: 10px;
display: block;
text-align: center;
}

/*img*/
#contents_area .img_wrapper {
width: 100%;
position: relative;
}
#contents_area .img_inner01 {
width: 100%;
margin-top: 0;
padding-top: 38.5%;
position: relative;
z-index: 2;
}
#contents_area .img_inner01::before {
content: "";
display: block;
width: 79.2%;
position: absolute;
background-color: #BCD8CE;
padding-top: 40.26%;
top: 16.63%;
right: 7.32%;
z-index: 1;
}
#contents_area .img01 {
width: 80.08%;
position: absolute;
top: 0;
right: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner02 {
width: 100%;
margin-top: 0;
padding-top: 67.56%;
position: relative;
z-index: 2;
}
#contents_area .img_inner02::before {
content: "";
display: block;
width: 27%;
position: absolute;
background-color: #BCD8CE;
padding-top: 67.56%;
top: 0;
right: 13.46%;
z-index: 1;
}
#contents_area .img02 {
width: 80.08%;
position: absolute;
top: 19.13%;
left: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner03 {
width: 100%;
margin-top: 0;
padding-top: 42.6%;
position: relative;
z-index: 2;
}
#contents_area .img_inner03::before {
content: "";
display: block;
width: 80.8%;
position: absolute;
background-color: #BCD8CE;
padding-top: 41.72%;
top: 22.9%;
right: 0;
z-index: 1;
}
#contents_area .img03 {
width: 54.9%;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner04 {
width: 100%;
margin-top: 0;
padding-top: 38.5%;
position: relative;
z-index: 2;
}
#contents_area .img_inner04::before {
content: "";
display: block;
width: 79.2%;
position: absolute;
background-color: #BCD8CE;
padding-top: 43.92%;
top: 16.63%;
right: 7.32%;
z-index: 1;
}
#contents_area .img04 {
width: 80.08%;
position: absolute;
top: 0;
right: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner05 {
width: 100%;
margin-top: 0;
padding-top: 38.5%;
position: relative;
z-index: 2;
}
#contents_area .img_inner05::before {
content: "";
display: block;
width: 79.2%;
position: absolute;
background-color: #BCD8CE;
padding-top: 38.06%;
top: 18%;
left: 7.32%;
z-index: 1;
}
#contents_area .img05 {
width: 80.08%;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img06 {
width: 100%;
margin: 70px auto;
}
#contents_area .img06 p.cap {
font-size: 10px;
line-height: 1.4;
text-align: left;
}
#contents_area .img_inner07 {
width: 100%;
margin-top: 0;
padding-top: 0;
position: relative;
z-index: 2;
}
#contents_area .img_inner07::before {
content: "";
display: block;
width: 92.67%;
position: absolute;
background-color: #BCD8CE;
padding-top: 34.33%;
top: 16.63%;
right: 0;
z-index: 1;
}
#contents_area .img07 {
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto;
z-index: 3;
}

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

}

@media only screen and (max-width: 768px) {
/*mainvisual*/
#mainvisual {
width: 100%;
position: relative;
background-color: #BCD8CE;
margin-top: 63px;
padding-top: 80%;
padding-bottom: 30px;
}
#mainvisual .mv_wrapper {
width: 88%;
position: absolute;
top: 0;
right: 0;
margin-top: -63px;
}
#mainvisual .mv {
}
#mainvisual h1 {
color: #333;
position: absolute;
z-index: 10;
top: 85.5%;
left: -6.6%;
}
#mainvisual h1 span.maintitle {
font-size: 14px;
line-height: 2.7;
background-color: #FFF;
padding: 5px;
font-weight: 100;
letter-spacing: 0.2em;
}
#mainvisual h1 span.subtitle {
font-size: 18px;
line-height: 1.2;
background-color: #FFF;
padding: 5px;
font-weight: 100;
letter-spacing: 0.2em;
}
#mainvisual h1 span {
line-height: 1.2;
background-color: #FFF;
padding: 5px;
font-size: 26px;
letter-spacing: 0.1em;
}
#mainvisual .local_nav {
width: 90%;
margin: 0 auto;
}
#mainvisual .local_nav ul {
display: block;
}
#mainvisual .local_nav li {
width: 100%;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 10px;
}
#mainvisual .local_nav li a {
color: #333;
display: block;
position: relative;
padding: 10px;
}
#mainvisual .local_nav li a span {
margin-left: -1em;
}
#mainvisual .local_nav li a.current {
border: 1px solid #FFF;
color: #FFF;
}
#mainvisual .local_nav li a::before {
content: url("../img/ico_arrow_g.svg");
display: block;
position: absolute;
top: 50%;
right: 12%;
transition: 0.5s cubic-bezier(0,.55,.75,1);
transform: translate(0,-50%);
width: 38px;
}
#mainvisual .local_nav li a:hover::before {
transform: translate(25%,-50%);
}
#mainvisual .local_nav li a.current::before {
content: url("../img/ico_down.svg");
display: block;
position: absolute;
top: 50%;
right: 12%;
transform: translate(0,-50%);
width: 4%;
max-width: 14px;
}
/*contents*/
#contents_area .index_area {
width: 90%;
margin: 0 auto 40px;
background-color: #F4F5F5;
padding: 25px;
}
#contents_area .index_inner {
display: block;
}
#contents_area .index_inner h3 {
font-size: 32px;
font-family: 'Dancing Script', cursive;
color: #000;
width: auto;
text-align: center;
}
#contents_area .index_inner li a {
font-size: 14px;
line-height: 1.2;
padding: 5px 5px 5px 20px;
text-decoration: underline;
display: block;
position: relative;
}
#contents_area .index_inner li a:hover {
text-decoration: none;
}
#contents_area .index_inner li a::before {
content: url("../img/ico_down_pk.svg");
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
width: 11px;
}


/*contents*/
#contents_area .txt_area h2 {
font-size: 28px;
margin-bottom: 32px;
}
#contents_area .txt_area p {
font-size: 14px;
line-height: 2;
}

#contents_area .txt_wrapper {
width: 100%;
margin: 0 auto 65px;
padding: 20px 0;
background-color: #FFF;
position: relative;
z-index: 10;
}
#contents_area .txt_wrapper.line02 {
margin-top: 55px
}
#contents_area .txt_wrapper.line03 {
margin-top: 93px
}
#contents_area .txt_wrapper.line02_noimg {
padding-top: 55px;
}
#contents_area .txt_wrapper.line03_noimg {
padding-top: 93px;
}
#contents_area .txt_area {
width: 90%;
margin: 0 auto;
position: relative;
}
#contents_area .txt_area h2 {
font-size: 28px;
line-height: 1.4;
margin-bottom: 28px;
position: absolute;
top: -65px;
left: 0
}
#contents_area .line02 .txt_area h2 {
top: -103px;
}
#contents_area .line03 .txt_area h2 {
top: -141px;
}
#contents_area .txt_area h2 span {
background-color: #FFF;
padding: 5px;
margin: 0 0 0 -5px;
}
#contents_area .txt_area p {
font-size: 14px;
line-height: 2;
margin-bottom: 1em;
letter-spacing: 0.1em;
}

#contents_area .nav_wrapper {
width: 90%;
margin: 0 auto;
}
#contents_area .nav_area {
margin: 100px auto;
}
#contents_area .nav_area li {
margin-bottom: 15px;
}
#contents_area .nav_area .to_next li ,
#contents_area .nav_area .to_prev li {
border: 1px solid #333;
}
#contents_area .nav_area .to_next a ,
#contents_area .nav_area .to_prev a {
font-size: 18px;
color: #333;
padding: 15px;
display: block;
text-align: center;
}
#contents_area .nav_area .to_next a span {
position: relative;
padding-right: 28px;
}
#contents_area .nav_area .to_prev a span {
position: relative;
padding-left: 28px;
}
#contents_area .nav_area .to_next a span::after {
content: url("../img/ico_arrow_g.svg");
right: -28px;
transition: 0.5s cubic-bezier(0,.55,.75,1);
transform: translate(0,-70%);
width: 38px;
}
#contents_area .nav_area .to_next a:hover span::after {
transform: translate(25%,-70%);
}
#contents_area .nav_area .to_prev a span::after {
content: url("../img/ico_arrow_g2.svg");
left: -28px;
transition: 0.5s cubic-bezier(0,.55,.75,1);
transform: translate(0,-70%);
width: 38px;
}
#contents_area .nav_area .to_prev a:hover span::after {
transform: translate(-25%,-70%);
}

#contents_area .nav_area .to_top a {
font-size: 12px;
}

/*img*/
#contents_area .img_wrapper {
width: 100%;
position: relative;
}
#contents_area .img_inner01 {
width: 100%;
margin-top: 0;
padding-top: 82%;
position: relative;
z-index: 2;
}
#contents_area .img_inner01::before {
content: "";
display: block;
width: 86.6%;
position: absolute;
background-color: #BCD8CE;
padding-top: 68.8%;
top: 20%;
right: 13.4%;
z-index: 1;
}
#contents_area .img01 {
width: 80.08%;
position: absolute;
top: 0;
right: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner02 {
width: 100%;
margin-top: 0;
padding-top: 98%;
position: relative;
z-index: 2;
}
#contents_area .img_inner02::before {
content: "";
display: block;
width: 29.86%;
position: absolute;
background-color: #BCD8CE;
padding-top: 100.8%;
top: 0;
right: 5.33%;
z-index: 1;
}
#contents_area .img02 {
width: 87.73%;
position: absolute;
top: 30%;
left: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner03 {
width: 100%;
margin-top: 0;
padding-top: 82%;
position: relative;
z-index: 2;
}
#contents_area .img_inner03::before {
content: "";
display: block;
width: 81.33%;
position: absolute;
background-color: #BCD8CE;
padding-top: 55.5%;
top: 43.0%;
right: 0;
z-index: 1;
}
#contents_area .img03 {
width: 82.13%;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner04 {
width: 100%;
margin-top: 0;
padding-top: 50%;
position: relative;
z-index: 2;
}
#contents_area .img_inner04::before {
content: "";
display: block;
width: 90.4%;
position: absolute;
background-color: #BCD8CE;
padding-top: 49.6%;
top: 20.5%;
left: 0;
z-index: 1;
}
#contents_area .img04 {
width: 91.46%;
position: absolute;
top: 0;
right: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img_inner05 {
width: 100%;
margin-top: 0;
padding-top: 78%;
position: relative;
z-index: 2;
}
#contents_area .img_inner05::before {
content: "";
display: block;
width: 86.4%;
position: absolute;
background-color: #BCD8CE;
padding-top: 70.13%;
top: 20%;
right: 0;
left: inherit;
z-index: 1;
}
#contents_area .img05 {
width: 88%;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
z-index: 3;
}
#contents_area .img06 {
width: 90%;
}
#contents_area .img_inner07 {
width: 100%;
margin-top: 0;
padding-top: 55%;
position: relative;
z-index: 2;
}
#contents_area .img_inner07::before {
content: "";
display: block;
width: 94.66%;
position: absolute;
background-color: #BCD8CE;
padding-top: 47.8%;
top: 20.5%;
right: 0;
z-index: 1;
}
#contents_area .img07 {
width: 83.7%;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
z-index: 3;
}

}