@charset "utf-8";

/*---全体----*/
*:not(header, footer) {
    letter-spacing: unset;

}

/*
.child_cont img{
    max-width: 100%;
}
*/
.child_cont p,
.child_cont td,
.child_cont th,
.child_cont li {
    font-size: clamp(13px, 1.7vw, 15px);
    line-height: 1.7;
    letter-spacing: .2ex;
}

.child_cont h1 {
    font-size: clamp(25px, 3.8vw, 40px);
    line-height: 1.5;
    letter-spacing: .4ex;
}

.child_cont h2 {
    font-size: clamp(19px, 3.5vw, 27px);
    line-height: 1.5;
    letter-spacing: .3ex;
}

.child_cont h3 {
    font-size: clamp(20px, 3.8vw, 32px);
    line-height: 1.5;
    letter-spacing: .15ex;
}

.child_cont h4 {
    font-size: clamp(21px, 2.8vw, 25px);
    line-height: 1.5;
    letter-spacing: .15ex;
}

.child_cont a {
    font-size: clamp(12px, 1.7vw, 13px);
    line-height: 1.7;
    letter-spacing: .2ex;
}

.bold,
b {
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体 Bold", "Yu Gothic Bold", YuGothic, 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN W6", Arial, Helvetica, メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
}

.serif {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.container {
    width: 93%;
    max-width: 1200px;
    margin: 0 auto;
}

.child_cont div[class*="content"] {
    width: 100%;
    padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .child_cont div[class*="content"] {
        padding-bottom: 30px;
    }
}

/*----
/*======top=====*/
/*------title_box------*/
.title_box {
    width: 100%;
    display: flex;
}

.title_box img {
    width: 55%;
    object-fit: cover;
}

.title_box .text_box {
    width: 45%;
    background-color: #F3F3EF;
    padding: 10vh 0;
    display: flex;
    justify-content: center;
    align-items: center;
	white-space: nowrap;
}


.title_box .text_box>div {
    width: clamp(280px, 80%, 430px);
}

.title_box h1 {
    margin-bottom: 25px;
}

.title_box h2 {
    margin-bottom: 45px;
}

.title_box .label {
    font-size: clamp(11px, 1.7vw, 13px);
    letter-spacing: .2ex;
    display: inline-block;
    background-color: #1c1c1c;
    padding: 3px 31px;
    color: #fff;
    margin-bottom: 70px;
}

.title_box .top_border {
    width: 100%;
    height: 0%;
    border-bottom: #D1D1D1 1px solid;
    margin: 0 auto 25px;
}

.title_box .update {
    font-size: clamp(10px, 1.7vw, 13px);
    letter-spacing: .15ex;
    color: #878785;
}

@media screen and (max-width: 768px) {
    .title_box {
        flex-direction: column;
    }

    .title_box img {
        width: 100%;
    }

    .title_box .text_box {
        width: 100%;
        padding: 30px 0 35px;
    }

    .title_box h1 {
        margin-bottom: 15px;
    }

    .title_box h2 {
        margin-bottom: 20px;
    }

    .title_box .label {
        margin-bottom: 30px;
    }

    .title_box .top_border {
        margin: 0 auto 15px;
    }
}

/*------pankuzu------*/
#pankuzu {
    display: inline-block;
    position: unset;
/*    padding: 0 0 142px 25px;*/

}

#pankuzu ul {
    width: 100%;
}

#pankuzu li,
#pankuzu a {
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    #pankuzu {
        display: none;
    }

}
/*------mokuzi------*/
.mokuzi{
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding-bottom: 100px;

}
.mokuzi li{
    display: block;
    padding: 20px 0;
    border-bottom: #CCCCCC solid 1px;
}
.mokuzi li a{
    font-size: clamp(13px, 1.7vw, 15px);
    line-height: 1.7;
    letter-spacing: .2ex;
    transition: opacity .4s;
}
.mokuzi li a:hover{
    opacity: 0.5;
}
.mokuzi .mokuzi_title{
    display: block;
    font-size: clamp(16px, 1.7vw, 18px);
    line-height: 1.7;
    letter-spacing: .2ex;
    padding-bottom: 20px;
    border-bottom: #CCCCCC solid 1px;
}

/*======maincontent=====*/
.title {
    padding-bottom: 50px;
   text-align: center;
}

.border {
    width: 100%;
    height: 0%;
    border-bottom: #CCCCCC 1px solid;
    margin: 0 auto 100px;

}

.maincontent p,
.maincontent table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 100px;
}

.maincontent .img_box {
    padding-bottom: 100px;
}

.maincontent .img_box img {
    width: 100%;
}

.maincontent .img_box:has(span) img {
    margin-bottom: 15px;
}


.img_sub_text,
.maincontent .img_box span {
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: 1.7;
    letter-spacing: .2ex;
    display: block;
    padding-left: 10px;
}

.maincontent .text_box {
    padding-bottom: 100px;
}
.maincontent .text_box p{
    margin: 0 auto 20px;
}


.maincontent table th {
    width: 5em;
    padding: 0 1em 40px 0;
    text-align: left;
    vertical-align: top;

}

.maincontent table td {
    width: calc(100% - 6em);
    padding-bottom: 40px;
}

.maincontent table tr:last-of-type th,
.maincontent table tr:last-of-type td {
    padding-bottom: 0;
}

.maincontent .last_text,
.maincontent .first_text {
    line-height: 2.1;
}

.maincontent div[class*="content"]>.img_box span {
    padding-left: 20px;
}

@media screen and (max-width: 768px) {
    .border {
        margin: 0 auto 50px;
    }

    .title {
        padding-bottom: 30px;
    }

    .maincontent p,
    .maincontent table {
        margin: 0 auto 50px;
    }

    .maincontent .img_box {
        padding-bottom: 50px;
    }

    .maincontent .img_box img {
        margin-bottom: 15px;
    }

    .maincontent .text_box {
        padding-bottom: 50px;
    }

    .maincontent table th {
        padding: 0 1em 20px 0;
    }

    .maincontent table td {
        padding-bottom: 20px;
    }

}

/*------patarn_01------*/
.patarn_01,
.patarn_02 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding-bottom: 100px;
}

.patarn_01 .text_box {
    width: 67%;
    align-items: flex-start;
    padding: 0;
}

.patarn_01 .text_box table {
    width: 68%;
    margin-bottom: 0;
}

.patarn_01 .img_box {
    width: 33%;
    padding: 0;
}


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

    .patarn_01,
    .patarn_02 {
        padding-bottom: 50px;
        flex-direction: column;
    }

    .patarn_01 .text_box {
        width: 100%;
    }

    .patarn_01 .text_box table {
        width: 93%;
        margin-bottom: 50px;
    }

    .patarn_01 .img_box {
        width: 70%;
        margin: 0 auto;

    }
}

/*------patarn_02------*/
.patarn_02 .img_box {
    width: 50%;
    padding: 0 30px;
}

.patarn_02 .text_box {
    width: 50%;
    padding: 0 26px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.patarn_02 table {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .patarn_02 .img_box {
        width: 100%;
        padding: 0;
        order: 0;
    }

    .patarn_02 .text_box {
        width: 100%;
        padding: 0;
        padding-bottom: 50px;
        order: -1;
    }
}

/*------movei------*/
.movei {
    padding-bottom: 90px;
    text-align: center;
}

.movei video,
.movei iframe {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16/9;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .movei {
        padding-bottom: 40px;
    }
}

/*======bottom=====*/


/*------introduciton------*/
.introduciton {
    width: 100%;
    display: flex;
    margin-bottom: 100px;
}

.introduciton .text_box h4 {
    font-size: clamp(20px, 2.8vw, 26px);
    margin-bottom: 45px;
}

.introduciton .text_box div>span,
.int_text {
    font-size: clamp(15px, 1.8vw, 18px);
    display: block;
    margin-bottom: 26px;
    letter-spacing: .2ex;
    line-height: 1.7;
}

.introduciton .text_box p {
    margin-bottom: 55px;
}

.introduciton .base_btn {
    background-color: #fff;
    border: transparent;
    padding: 0.8em 3.3em;
}

.introduciton img {
    width: 45%;
    object-fit: cover;
}

.introduciton .text_box {
    width: 55%;
    background-color: #EEF0F2;
    padding: 95px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduciton .text_box>div {
    width: clamp(280px, 80%, 480px);
}

@media screen and (max-width: 768px) {
    .introduciton {
        flex-direction: column;
        margin-bottom: 50px;
    }

    .introduciton .text_box h4 {
        margin-bottom: 30px;
    }

    .introduciton .text_box div>span,
    .int_text {
        margin-bottom: 20px;
    }

    .introduciton .text_box p {
        margin-bottom: 40px;
    }

    .introduciton img {
        width: 100%;
        object-fit: cover;
        order: 0;
    }

    .introduciton .text_box {
        width: 100%;
        padding: 50px 0;
        order: -1;
    }
}

/*------link------*/
.link {
    width: 100%;
    padding-bottom: 100px;
}

.link_item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

.link_item:last-of-type {
    margin-bottom: 0;
}

.link_item:nth-of-type(2n) .text_box {
    order: 0;
}

.link_item:nth-of-type(2n) img {
    order: 1;
}

.link img {
    width: 50%;
    object-fit: cover;
}

.link .text_box {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link .text_box>div {
    width: clamp(280px, 80%, 420px);
}

.link .text_box h4 {
    margin-bottom: 4px;
    letter-spacing: 0.08ex;
}

.link .text_box p {
    font-size: clamp(12px, 1.7vw, 14px);
    margin-bottom: 25px;

}

.link .text_box div>span,
.link_small_text {
    display: block;
    font-size: clamp(11px, 1.7vw, 13px);
    letter-spacing: .2ex;
    margin-bottom: 25px;


}

@media screen and (max-width: 768px) {
    .link {
        padding-bottom: 50px;
    }

    .link_item {
        flex-direction: column;
        margin-bottom: 50px;
    }

    .link_item:nth-of-type(2n) .text_box {
        order: 0;
    }

    .link_item:nth-of-type(2n) img {
        order: -1;
    }

    .link img {
        width: 100%;
        margin-bottom: 20px;
    }

    .link .text_box {
        text-align: center;
        width: 100%;
    }

    .link .text_box p {
        text-align: left;
    }


}

/* POPUP AREA
---------------------------------------------------------------------- */
#popupArea {
    position: fixed;
    z-index: 200;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 66px;
    background-color: #fff;
    display: flex;
    align-items: center;
    transform: translateY(0%);
    transition: .15s ease;
    padding: 10px 14px;
}

#popupArea.close {
    transform: translateY(100%);
}

#popupArea .pagetop {
    display: block;
    width: 14px;
    height: 14px;
    border-top: 1px solid #1c1c1c;
    border-right: 1px solid #1c1c1c;
    transform: rotate(-45deg);
    transform-origin: center;
    cursor: pointer;
    margin: 0 15px -6px 0;
}

#popupArea .cart-fav-btns {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

#popupArea .fav {
    width: 37px;
    height: 37px;
    background-image: url('../../public/detail/images/fav.png');
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    display: none;
}

#popupArea .fav.active {
    background-color: #d9d7c7;
    background-image: url('../../public/detail/images/fav_active.png');
}

#popupArea form {
    background-color: #1c1c1c;
    border-radius: 8px;
    overflow: hidden;
    color: #ffffff;
    margin: 0 auto;
    width: 175px;
    height: 100%;
}

#popupArea form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#popupArea form button>img {
    margin-right: 10px
}

#popupArea form:hover {
    background-color: #777777;
}

@media(min-width:1000px) {
    #popupArea {
        justify-content: space-between;
        background-color: transparent;
    }

    #popupArea .pagetop {
        margin: 0 15px -15px 0;
    }

    #popupArea .cart-fav-btns {
        justify-content: end;
        flex-direction: row-reverse
    }

    #popupArea .fav {
        margin-right: 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .05);
      display: none;
    }

    #popupArea form {
        width: 320px;
        margin: 0
    }

    #popupArea form button>img {
        margin-right: 15px
    }
}