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


.mainvisual {
    position: relative;
    background-image: url(../images/denchu/bg_denchu.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: calc(92vh - 120px);
    min-height: 734px;
}

.main_title {
    position: absolute;
    width: 100%;
    max-width: 1280px;
    height: calc(92vh - 120px);
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    min-height: 734px;
}

.main_title .ttl {
    position: absolute;
    width: 70%;
    top: 48%;
    bottom: 0;
    left: 5%;
    transform: translate(0, -50%);
}

.mainvisual h2 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    line-height: 1.3;
    font-size: clamp(26px, 0.278rem + 5.75vw, 78px);
}

.mainvisual img {
    max-width: 332.5px;
    margin: 0 0 0 1%;
}

.mainvisual p.shadow {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    font-size: clamp(16px, 0.871rem + 0.55vw, 21px);
    padding: 0px 10px;
    display: inline-block;
    position: relative;
    margin: 3% 0 0;
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.35);
}


.mainvisual .catch {
    position: absolute;
    top: 103%;
    bottom: 0;
}

.mainvisual .catch p {
    color: #fff;
    line-height: 2;
    font-size: clamp(13px, 0.709rem + 0.44vw, 17px);
}


@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {
    .mainvisual {
        background-image: url(../images/denchu/bg_denchu_sp.png);
        height: calc(71vh - 80px);
        min-height: 482px;
    }

    .main_title {
        height: calc(71vh - 80px);
        min-height: 482px;
    }

    .main_title .ttl {
        width: 100%;
        text-align: center;
        top: 55%;
        left: 0;
        transform: translate(0, -50%);
    }

    .mainvisual h2 {
        font-family: "Noto Serif JP", serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        line-height: 1.3;
        font-size: clamp(26px, 0.278rem + 5.75vw, 78px);
    }

    .mainvisual img {
        max-width: 167px;
        margin: 0 0 0 1%;
    }

    .mainvisual p.shadow {
        width: 80%;
        margin: 3% auto;
    }


    .mainvisual .catch {
        position: absolute;
        top: 118%;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .mainvisual .catch p {
        color: #fff;
        line-height: 1.2;
        font-size: clamp(13px, 0.709rem + 0.44vw, 17px);
    }

}


main {
    background-image: url(../images/denchu/bg_01.png);
    background-repeat: no-repeat;
    background-position: center 38%;
    padding: 10% 0;
}

.inner {
    width: 92%;
    max-width: 1030px;
    margin: 0 auto;
}

.about {
    margin: 0 auto 15%;
}

.about .bg_gray {
    background-color: #CACACA;
    box-shadow: 0px 0px 10px 10px #CACACA;
    border: 1px solid #fff;
    padding: 5% 1%;
    text-align: center;
}

.about img {
    width: 90%;
    max-width: 448px;
    margin: 3% auto 5%;
}

.about p {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    width: 96%;
    margin: 1% auto;
    line-height: 1.5;
    text-align: left;
    font-size: clamp(16px, 0.845rem + 0.66vw, 22px);
}


.about p.ttl {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    font-weight: 700;
    color: #42210B;
    width: 100%;
    font-size: clamp(17px, 0.829rem + 0.99vw, 26px);
}


@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}



.point {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0.5) 100%);
    padding: 5% 0 8%;
    text-align: center;
}

.point h2 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    line-height: 1.2;
    font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.point p.en {
    color: #fff;
    font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.point .bdr {
    height: 32px;
    width: 1px;
    border-left: 1px solid #fff;
    margin: 2% auto;
}

.point .flex_c {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.point .flex_c .box {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    width: 260px;
    height: 291px;
    padding: 5% 2%;
    overflow-y: hidden;
    margin: 1% 1%;
}

.point .flex_c .box.box01 {
    background-image: url(../images/denchu/img_02.png);
    padding: 10% 0;
}

.point .flex_c .box.box02 {
    background-image: url(../images/denchu/img_03.png);
    padding: 11.5% 0;
}

.point .flex_c .box.box03 {
    background-image: url(../images/denchu/img_04.png);
    padding: 11.5% 0;
}

.point .flex_c .box.box04 {
    background-image: url(../images/denchu/img_05.png);
    padding: 11.5% 0;
}

.point .flex_c .box.box05 {
    background-image: url(../images/denchu/img_06.png);
    padding: 11.5% 0;
}

.point .flex_c .box.box06 {
    background-image: url(../images/denchu/img_14.png);
    padding: 11.5% 0;
}

.point .flex_c .box p {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: clamp(16px, 0.845rem + 0.66vw, 22px);
}

.point .flex_c .box p.vm {
    position: absolute;
    font-weight: 400;
    left: 0;
    right: 0;
    bottom: 20px;
    font-size: 15px;
}

.point .flex_c .box p.hidden {
    position: absolute;
    left: 6%;
    right: 4%;
    width: 90%;
    bottom: 20px;
    display: block;
    text-align: left;
    font-size: 15px;
    letter-spacing: -1px;
    transform: translateY(100px);
}

.point .flex_c .box:hover {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/denchu/bg_02.png);
    transition: all ease 0.5s;
    padding: 5% 2%;
}

.point .flex_c .box:hover p {
    color: #000;
    ;
}

.point .flex_c .box:hover p.vm {
    display: none;
}

.point .flex_c .box:hover p.hidden {
    transition: all ease 0.5s;
    transform: translateY(0);
}



@media screen and (max-width: 768px) {
    .point .flex_c .box.box01 {
        background-image: url(../images/denchu/bg_02.png);
        padding: 10% 0;
    }

    .point .flex_c .box.box02,
    .point .flex_c .box.box03,
    .point .flex_c .box.box04,
    .point .flex_c .box.box05,
    .point .flex_c .box.box06 {
        background-image: url(../images/denchu/bg_02.png);
        padding: 11.5% 0;
    }

    .point .flex_c .box p {
        color: #000;
    }

    .point .flex_c .box p.vm {
        display: none;
    }

    .point .flex_c .box p.hidden {
        transform: translateY(0);
    }

    .point .flex_c .box:hover {
        transition: all ease 0.5s;
        padding: 11.5% 0;
    }

    .point .flex_c .box:hover p {
        color: #000;
    }

    .point .flex_c .box:hover p.vm {
        display: none;
    }

    .point .flex_c .box:hover p.hidden {
        transition: all ease 0.5s;
        transform: translateY(0);
    }
}

@media screen and (max-width: 480px) {
    .point .bdr {
        height: 28px;
        margin: 5% auto;
    }

    .point .flex_c .box {        
        width: 80%;
        height: 195px;
    }

}




.type {
    margin: 8% 0 15%;
    text-align: center;
}

.type h2 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.type p.en {
    color: #231815;
    font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.type .bdr {
    height: 32px;
    width: 1px;
    border-left: 1px solid #231815;
    margin: 2% auto;
}

.type p.mincho {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(16px, 0.948rem + 0.22vw, 18px);
}

.type p.mincho br{
    display: none;
}

.type img.sp {
    display: none;
}

.type img.pc {
    display: block;
    width: 90%;
    max-width: 540px;
    margin: 3% 10% 5% auto;
}


.tab-panel {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    display: flex;
    justify-content: center;
}

.tab-group {
    order: 1;
    width: 28%;
}

.tab-group li {
    position: relative;
    font-weight: 700;
    padding: 15px 15px 15px 15px;
    text-align: left;
    margin: 0 0 2% 2%;
    color: #42210B;
    font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
}

.tab-group li::before {
    display: inline-block;
    position: relative;
    content: "▶";
    margin-right: 0.5em;
}

.tab-group li:nth-child(2)::before{
    content: none;
}

.tab-group li:nth-child(8){
    padding: 5px 15px;
    font-size: 0.9em;
}

.tab-group li:nth-child(8)::before{
    content: none;
}

.tab-group .tab {
    border: 1px solid #ccc;
    color: #979797;
    cursor: pointer;
}

.tab.is-active {
    position: relative;
    z-index: 2;
    margin-left: -1px;
    width: 100%;
    padding: 15px 15px 15px 5px;
    transition: all 0.2s ease-out;
    box-shadow: 1px 1px 2px #cacaca;
    background: rgba(255, 255, 255, 0.5);
    border-left: 3px solid #fff;
    color: #603813;
}

.tab.is-active::before {
    content: "▶";
    transform: rotate(180deg);
    top: -2px;
}

.panel-group {
    width: 72%;
    background: rgba(255, 255, 255, 0.5);
    border: solid 1px #cacaca;
    box-shadow: 1px 1px 2px #cacaca;
    text-align: left;
    padding: 2%;
}

.panel {
    display: none;
}

.panel.is-show {
    display: block;
}

.panel h3 {
    color: #603813;
    font-weight: 700;
    margin-bottom: 3%;
    font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
}

.panel h3 span {
    color: #000;
}

.panel p.ttl {
    color: #000;
    font-weight: 700;
    font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
}

.panel p {
    color: #4d4d4d;
    line-height: 1.5;
}

.panel p.mb05 {
    margin-bottom: 5%;
}

.panel table {
    table-layout: fixed;
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
    font-size: clamp(16px, 0.948rem + 0.22vw, 18px);
}

.panel .table02 {
    width: 70%;
}

.panel table.mb00{
    margin-bottom: 0;
}

.panel table th {
    width: 75%;
    background: #cacaca;
    color: #42210b;
    padding: 2px;
}

.panel .table01 th:nth-child(1) {
    width: 25%;
}

.panel .table03 th:nth-child(1) {
    width: 33%;
}

.panel table td {
    background: #f0f0f0;
    padding: 3% 0;
}

.panel .table03 td:nth-child(2) {
    text-align: left;
    padding: 3% 2%;
}

.panel .table03 td span {
    /*color: #4d4d4d;*/
    font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
}

.panel .table03 td span.rotate {
    display: inline-block;
    transform: rotate(90deg);
}



@media screen and (max-width: 768px) {    
    .type img {
        margin: 5% auto 10%;
    }

    .tab-panel {        
        flex-wrap: wrap;        
    }

    /*.tab-group {
        order: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .tab-group li {
        min-width: 15%;
        font-size: 14px;
        padding: 1% 1.5%;
        margin: 0;
        text-align: center;
    }

    .tab.is-active {
        width: auto;
        margin-left: 0;
        border: 1px solid #ccc; 
    }

    .panel-group {        
        width: 100%;
    }*/
    

    .tab-group {        
        flex-wrap: wrap;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .tab-group li {
        min-width: 19%;
        font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
        padding: 10px 15px 5px 15px;
        margin: 1% 0;
        text-align: center;
        position: relative;
        line-height: 1.2;
    }
    
    .tab-group li::before {
        content: no-close-quote;
        margin: 0;
    }

    .tab-group li::after {
        display: block;
        content: "▲";
        text-align: center;
    }

    .tab-group li:nth-child(1){
        width: auto;
        text-align: left;
    }

    .tab-group li:nth-child(1)::after{
        display: inline-block;
        margin: 0 0.5em 0 1em;
    }

    .tab-group li:nth-child(2){
        width: 100%;
        text-align: left;
    }

    .tab-group li:nth-child(2)::after{
        content: none;
    }
    
    .tab-group li:nth-child(8){
        width: 100%;
        text-align: left;
    }

    .tab-group li:nth-child(8)::after{
        content: none;
    }

    .tab.is-active {
        width: auto;
        margin-left: 0;
        padding: 10px 15px 5px 15px;
        border: 1px solid #ccc; 
    }

    .tab.is-active::before {
        content: none;
    }
    
    .tab.is-active::after{
        content: "▼";
    }

    .panel-group {
        width: 100%;
        order: 1;
    }
}

@media screen and (max-width: 480px) {
    .type .bdr {
        height: 28px;
    }
    
    .type p.mincho br{
        display: block;
    }

    .type img.pc {
        display: none;
    }
    .type img.sp {
        display: block;
        margin: 5% auto 10%;
    }

    .tab-group {        
        flex-wrap: wrap;
    }

    .tab-group li {
        width: 33%;
        font-size: 14px;
        padding: 2% 1.5%;
        margin: 1% 0;
        text-align: center;
        position: relative;
        line-height: 1.2;
    }
    
    .tab-group li::after {
        display: block;
        content: "▲";
        text-align: center;
    }

    .tab-group li:nth-child(1){
        width: auto;
        text-align: left;
    }
    
    .tab-group li:nth-child(1)::after{
        display: inline-block;
        margin: 0 0.5em 0 1em;
    }
    
    .tab-group li:nth-child(2){
        width: 100%;
        text-align: left;
    }
    
    .tab-group li:nth-child(2)::after{
        content: none;
    }
    
    .tab-group li:nth-child(3),
    .tab-group li:nth-child(4){
        width: 49.5%;
    }
    
    .tab.is-active {
        width: 33%;
        margin-left: 0;
        padding: 2% 1.5%;
        border: 1px solid #ccc; 
    }
    
    .tab.is-active::after{
        content: "▼";
    }

    .panel-group {
        width: 100%;
    }

    .panel {
        display: none;
    }

    .panel.is-show {
        display: block;
    }

    .panel h3 {
        color: #603813;
        font-weight: 700;
        margin-bottom: 3%;
        font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
    }

    .panel h3 span {
        color: #000;
    }

    .panel p.ttl {
        color: #000;
        font-weight: 700;
        font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
    }

    .panel p {
        color: #4d4d4d;
        line-height: 1.5;
    }

    .panel table {
        table-layout: fixed;
        width: 100%;
        text-align: center;
        margin-bottom: 5%;
        font-size: clamp(16px, 0.948rem + 0.22vw, 18px);
    }

    .panel .table02 {
        width: 70%;
    }

    .panel table th {
        width: 75%;
        background: #cacaca;
        color: #42210b;
        padding: 2px;
    }

    .panel .table01 th:nth-child(1) {
        width: 25%;
    }

    .panel .table03 th:nth-child(1) {
        width: 33%;
    }

    .panel table td {
        background: #f0f0f0;
        padding: 3% 0;
    }

    .panel .table03 td:nth-child(2) {
        text-align: left;
        padding: 3% 2%;
    }
    
    .panel .table03 td:nth-child(2) br{
        display: none;
    }

    .panel .table03 td span {
        /*color: #4d4d4d;*/
        font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
    }

    .panel .table03 td span.rotate {
        display: inline-block;
        transform: rotate(90deg);
    }
}




.flow {
    text-align: center;
    margin: 8% auto;
}

.flow h2 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.flow p.en {
    color: #231815;
    font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.flow .bdr {
    height: 32px;
    width: 1px;
    border-left: 1px solid #231815;
    margin: 2% auto;
}

.flow .flex_sb {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.flow .flex_sb .txt_box {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    padding: 5% 3% 0;
}

.flow .flex_sb .txt_box.box02 {
    padding: 5% 3% 10%;
}

.flow .flex_sb .txt_box h4 {
    font-weight: 700;
    font-size: clamp(16px, 0.689rem + 1.33vw, 28px);
}

.flow .flex_sb .txt_box h4 span {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    display: inline-block;
    background: #8A6239;
    color: #fff;
    padding: 0 5px;
    line-height: 1.2;
    font-size: clamp(13px, 0.605rem + 0.88vw, 21px);
}

.flow .flex_sb .txt_box p {
    font-size: clamp(14px, 0.746rem + 0.55vw, 19px);
    font-weight: 500;
}

.flow .flex_sb .txt_box p br.sp{
    display: none;
}

.flow .flex_sb .txt_box small {
    color: #978475;
}

.flow .flex_sb .txt_box .btn a {
    display: inline-block;
    text-align: center;
    background: #603813;
    color: #fff;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 0;
    margin: 3% 0 0;
    width: 100%;
    max-width: 315px;
    font-size: clamp(16px, 0.948rem + 0.22vw, 18px);
}

.flow .flex_sb img {
    width: 22%;
    max-width: 225px;
    margin: 3%;
}

.flow .bdr02{
    text-align: center;
}

.flow .bdr02 img.sp{
    display: none;
}

.flow .bdr02 img.pc{
    margin: 0 auto;
}


@media screen and (max-width: 768px) {
    .flow .flex_sb .txt_box p br{
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .flow {
        text-align: center;
        margin: 8% auto 25%;
    }
    
    .flow .bdr {
        height: 28px;
    }

    .flow .flex_sb {
        justify-content: center;
        text-align: center;
    }

    .flow .flex_sb .txt_box {
        width: 100%;
        padding: 5% 3%;
    }
    
    .flow .flex_sb .txt_box.box02 {
        padding: 5% 3% 15%;
    }

    .flow .flex_sb .txt_box h4 {
        margin-bottom: 3%;
    }
    
    .flow .flex_sb .txt_box p br,
    .flow .flex_sb .txt_box p br.sp{
        display: block;
    }

    .flow .flex_sb img {
        display: none;
    }
    
    
    .flow .bdr02 img.pc{
        display: none;
    }
    .flow .bdr02 img.sp{
        display: block;
        margin: 0 auto;
    }
}



.example {
    text-align: center;
    margin: 8% auto;
}

.example h2 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    font-size: clamp(24px, 1.086rem + 1.77vw, 40px);
}

.example p.en {
    color: #231815;
    font-size: clamp(13px, 0.657rem + 0.66vw, 19px);
}

.example .bdr {
    height: 32px;
    width: 1px;
    border-left: 1px solid #231815;
    margin: 2% auto;
}

.example #slide {
    margin: 8% auto 3%;
    width: 100%;
    overflow-x: hidden;
}

.swiper-container {
    padding: 5% 0;
    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
}

.swiper-wrapper {
    transition-timing-function: linear;
}

.modal_btn {
    margin: 3% auto;
}


/*モーダルを開くボタン*/
.modal_btn a.modal-open {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
    font-weight: 600;
    display: inline-block;
    border-radius: 20px;
    background: #603813;
    color: #fff;
    width: 90%;
    max-width: 410px;
    font-size: clamp(16px, 0.922rem + 0.33vw, 19px);
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 999;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active {
    opacity: 1;
    visibility: visible;
}

/*モーダル枠の指定*/
.modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 840px;
    width: 90%;
}

/*モーダルを閉じるボタンの指定*/
.modal-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #707070;
    cursor: pointer;
}


/*モーダル内のコンテンツの指定*/
.modal-content {
    background: #fff;
    border-radius: 15px;
    text-align: left;
    padding: 3%;
    text-align: center;
    font-size: 1em;
}

.modal-content ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-content ul li {
    width: auto;
    min-width: 15%;
    margin: 3%
}


@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {
    .example .bdr {
        height: 28px;
    }
}