@charset "utf-8";

/* ------------------------
    基本構造
------------------------ */

#header{
    position: relative;
    z-index: 100;
}

.part{
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 0;
}

.part .section{
    position: relative;
    text-align: left;
    max-width: 960px;
    margin: auto;
    padding: 0;
    font-size: 14px;
}

.part h2{
    text-indent: -9999em;
}
@media screen and (max-width: 1000px) {
    .part {
        background-size: 100%;
    }
    .part p {
        margin: 40% 0 0;
        padding:  15px;
        position: unset!important;
    }
    .part .section {
        height: auto!important;
    }
}


/* ------------------------
 part1 */

#part1{
    z-index: 1;
    background-image: url(img/bg_part1.jpg);
    padding: 0;
    margin: -10px auto 0 auto;
    color: #fff;
    position: relative;
}

#part1 .section{
    height: 417px;
    padding: 328px 0 0 0;
}
#part1 h1,
#part1 h2{
    display: none;
}

#part1 .thm{
    position: absolute;
    left:0;
    bottom: 40px;
}

#part1 .ul-wrap {
    max-width: 1004px;
    margin: 0 auto;
}
#part1 ul{
    left:0;
    bottom: 0;
    list-style: none;
    margin-left: -44px;
    padding: 0;
}

#part1 ul li{
    list-style: none;
    margin: 0 0 0 44px;
    padding: 0;
    float: left;
    width: 207px;
}

#part1 a img.btn{
    position: absolute;
    left:95px;
    max-width: 250px;
}

@media screen and (min-width: 999px) {
    #part1 .section > p {
        max-width: 410px;
        min-height: 120px;
    }
}
@media screen and (max-width: 1000px) {
    #part1 { 
        margin-top: 65px;
        color: #fff;
        background-size: 100%;
        background-image: url(img/bg_part1_sp.jpg);
    }
    #part1 .section {
        height: auto;
        padding-top: 0;
    }
    .part1_mv {
        padding-top: 60.5%;
        position: relative;
    }
    #part1 .btn-wrap {
        position: absolute;
        top: 71%;
        left: 16%;
        height: 40px;
        display: block;
        width: 100%;
        max-width: 250px;
    }
    #part1 a img.btn {
        position: unset;
        margin: 0;
        width: auto;
        height: 100%;
    }
    #part1 .thm {
        position: unset;
        margin: 0 0 20px;
    }
    #part1 .section > p {
        color: #333;
        margin: 15px;
        padding: 0;
    }
    #part1 ul {
        margin: 0 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    #part1 ul li {
        float: unset;
        margin: 0;
        width: calc(50% - 5px);
        max-width: 245px;
    }
}


/* ------------------------
 part2 */

#part2{ background-image: url(img/bg_part2.jpg); }

#part2 .section{ height: 497px; }

#part2 p{
    position: absolute;
    left:20px;
    top: 165px;
}
@media screen and (max-width: 1000px) {
    #part2{ background-image: url(img/bg_part2_sp.jpg); }
}


/* ------------------------
 part3 */

#part3{ background-image: url(img/bg_part3.jpg); }

#part3 .section{ height: 500px; }

#part3 p{
    position: absolute;
    left:538px;
    top: 335px;
}
@media screen and (max-width: 1000px) {
    #part3 { background-image: url(img/bg_part3_sp.jpg); }
    #part3 p {
        background-color: #faeaea;
    }
}

/* ------------------------
 part4 */

#part4{ background-image: url(img/bg_part4.jpg); }

#part4 .section{ height: 499px; }

#part4 p{
    position: absolute;
    left:20px;
    top: 345px;
}
@media screen and (max-width: 1000px) {
    #part4 { background-image: url(img/bg_part4_sp.jpg); }
}


/* ------------------------
 part5 */

#part5{ background-image: url(img/bg_part5.jpg); }

#part5 .section{ height: 450px; padding: 0}

#part5 ul{
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

#part5 ul li{
    position: absolute;
    top: 265px;
    left: 0;
    width: 280px;
}

#part5 ul li.p2{
    left: 350px;
}

#part5 ul li.p3{
    width: 260px;
    left: 700px;
}

#part5 li h3{
    color: #e42d6d;
    margin: 0;
    padding: 0 0 5px 0;
}
@media screen and (max-width: 1000px) {
    #part5 {
        background-color: #faeaea;
        background-image: none;
    }
    #part5 ul  {
        width: 100%;
        padding: 20px 0;
    }
    #part5 ul li {
        position: unset;
        padding: 20px 15px;
        width: auto;
    }
    #part5 li img {
        width: 90%;
        max-width: 220px;
        margin: 0 auto;
    }
    #part5 li h3 {
        margin-top: 20px;
    }
    #part5 li p {
        margin-top: 0;
        padding: 0;
        position: unset !important;
    }
    #part5 ul li.p3 {
        width: auto;
    }
}

/* ------------------------
 part6 */

#part6{ background-image: url(img/bg_part6.jpg); }

#part6 .section{ height: 499px; }
@media screen and (max-width: 1000px) {
    #part6 { background-image: url(img/bg_part6_sp.jpg); }
    #part6 .section {
        padding-top: 40%;
    }
}


/* ------------------------
 part7 */

#part7{ background-image: url(img/bg_part7.jpg); }

#part7 .section{
    height: 319px;
    width: 850px;
    padding:180px 55px 0 55px;
}

#part7 .btn-wrap {
    max-width: 530px;
}
#part7 .section a img{
    margin: 22px 0 0 0;
}
@media screen and (max-width: 1000px) {
    #part7 {
        background-color: #faeaea;
        background-image: none;
    }
    #part7 .section {
        width: auto;
        padding: 20px 15px 40px;
    }
    #part7 h2 {
        text-indent: unset;
        color: transparent;
        max-width: 370px;
        margin: 0 auto;
    }
    #part7 .btn-wrap {
        margin: 15px auto 0;
    }
}

/* ------------------------
 part8 */

#part8{ background-image: url(img/bg_part8.jpg); }
#part8 .section{
    width: 850px;
    padding:200px 55px 0 55px;
}

#part8 h2,
#part8 .tell{ display: none; }

#part8 table{
    width: 100%;
    table-layout: fixed;
}

#part8 table th,
#part8 table td{
    text-align: center;
    vertical-align: middle;
    line-height: 1.2em;
    padding: 9px 5px 7px 5px;
}

#part8 table thead th{
    background: #f3a8bc;
    color: #fff;
    padding-bottom: 5px;
}

#part8 table thead th small{
    display: block;
    font-size: 0.75em;
}
#part8 table tbody td,
#part8 table tbody td{
    border-top: 1px solid #f3a8bc;
}

.btn {
	margin: 40px 0;
}
@media screen and (max-width: 1000px) {
    #part8 {
        background-image: none;
    }
    #part8 .section {
        width: auto;
        padding: 0;
    }
    #part8 .tell {
        display: block;
        border-bottom: solid 1px #ccc;
        padding: 15px;
    }
    #part8 .tell p {
        display: none;
    }
    #part8 .tell img {
        margin: 0 auto;
        max-width: 800px;
    }
    .part8_inner {
        padding: 40px 15px;
    }
    .part8_inner h3 {
        font-size: 1.6rem;
        color: #f3a8bc;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    .part8_inner h3 small {
        color: #e42d6d;
        display: inline-block;
        font-size: 0.9rem;
        padding: 0 10px;
        position: relative;
    }
    .part8_inner h3 small::before,
    .part8_inner h3 small::after {
        content: '';
        width: 1px;
        height: 10px;
        background-color: #e42d6d;
        position: absolute;
        top: calc(50% - 3px);
        left: 3px;
        transform: rotate(-45deg);
    }
    .part8_inner h3 small::after {
        left: auto;
        right: 3px;
        transform: rotate(45deg);
    }
    #part8 .table {
        overflow-x: scroll;
        width: 100%;
        margin-top: 10px;
    }
    #part8 table {
        width: 850px;
    }
    #part8 .btn {
        margin: 40px 0 0;
        padding: 0;
        border: none;
    }
}