@charset "UTF-8";
@font-face {
    font-family: 'ZenMaruGo';
    font-display: swap;
    font-weight: 400;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'ZenMaruGo';
    font-display: swap;
    font-weight: 600;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'ZenMaruGo';
    font-display: swap;
    font-weight: 800;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Bold.ttf) format('truetype');
}
:root{
    --base-width: 375;
    --sec1-width: 331;
    --sec3-width: 335;
    --brown: #5b2420;
    --purple: #86519c;
    --purple-2: #ddcfe4;
    --purple-3: #d3bcdc;
    --100vw: 100vw;
}

html{
    font-size: clamp(16px, 4.26vw, 32px);
}
body{
    font-family: "ZenMaruGo", sans-serif;
}
body.no-scroll{
    overflow: hidden;
    height: 100%;
}

img{
    display: block;
}
picture img{
    max-width: 100%;
    width: 100%;
}
.sp{
    display: block;
}
.pc{
    display: none;
}
.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#main-content{
    width: 100%;
/*    margin: 0 auto;*/
    overflow: hidden;
}
#main-content .main-inner{
    overflow: hidden;
    background: url(../image/main_bg_1.svg);
    background-repeat: repeat;
    background-size: 100px 100px;
    background-position: top center;
}
#main-content h1{
    position: relative;
    width: calc(396 / var(--base-width) * 100%);
    height: auto;
    padding: 10px 0 0;
    left: 50%;
    transform: translateX(-50%);
}

#main-content header a{
    position: fixed;
    top: calc(15 / var(--base-width) * 100vw);
    right: calc(23 / var(--base-width) * 100vw);
    z-index: 1;
    width: calc(47 / var(--base-width) * 100vw);
}

#sec-1{
    margin: -38% calc(17 / var(--base-width) * 100%) 0;
}
#sec-1 .sec-inner{
    position: relative;
    border-style: solid;
    border-width: 1.33vw;
    border-image-source: url(../image/sec1/border_1.svg);
    border-image-slice: 19.6% fill;
    border-image-repeat: round;
    background-color: var(--purple);
    background-clip: padding-box;
}
#sec-1 h2{
    width: calc(142 / var(--sec1-width) * 100%);
    margin: 0 auto;
    padding: calc(31 / var(--sec1-width) * 100%) 0 0;
}
#sec-1 .image{
    width: calc(275 / var(--sec1-width) * 100%);
    margin: 0 auto;
    padding: calc(24 / var(--sec1-width) * 100%) 0 0;
}
#sec-1 .lead .is-1st{
    width: calc(286 / var(--sec1-width) * 100%);
    margin: 0 auto;
    padding: calc(21 / var(--sec1-width) * 100%) 0 calc(50 / var(--sec1-width) * 100%);
    background-image: url(../image/sec1/icn_1.svg);
    background-size: calc(62 / var(--sec1-width) * 100%) auto;
    background-position: center bottom 11%;
    background-repeat: no-repeat;
}
#sec-1 .lead .is-2nd{
    width: calc(238 / var(--sec1-width) * 100%);
    margin: 0 auto;
    padding: 0 0 calc(30 / var(--sec1-width) * 100%);
}

#sec-2{
    margin: calc(43 / var(--base-width) * 100%) auto 0;
}
#sec-2 .sec-inner{
    border-radius: 30px;
    background-color: var(--brown);
}
#sec-2 h2{
    width: calc(142 / var(--base-width) * 100%);
    margin: 0 auto;
    padding: calc(38 / var(--base-width) * 100%) 0 calc(27 / var(--base-width) * 100%);
}
#sec-2 h3{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}
#sec-2 h3 span{
    display: inline-block;
    position: relative;
}
#sec-2 h3 span::before,
#sec-2 h3 span::after{
    content: '';
    display: inline-block;
    position: absolute;
    top: 10%;
    width: calc(20 / var(--base-width) * var(--100vw));
    padding: calc(20 / var(--base-width) * var(--100vw)) 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
#sec-2 h3 span::before{
    left: -10%;
    background-image: url(../image/sec2/icn_1.svg);
}
#sec-2 h3 span::after{
    right: -10%;
    background-image: url(../image/sec2/icn_2.svg);
}
#sec-2 .image{
    width: calc(295 / var(--base-width) * 100%);
    margin: calc(25 / var(--base-width) * 100%) auto 0;
}
#sec-2 .lead{
    width: calc(295 / var(--base-width) * 100%);
    margin: 0 auto;
    padding: calc(20 / var(--base-width) * 100%) 0 calc(47 / var(--base-width) * 100%);
}
#sec-2 .lead p{
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625;
}

#sec-3{
    width: calc(var(--sec3-width) / var(--base-width) * 100%);
    margin: calc(31 / var(--base-width) * 100%) auto 0;
}
#sec-3 .is-before{
    position: relative;
}
#sec-3 h2{
    position: absolute;
    width: calc(142 / var(--sec3-width) * 100%);
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
}
#sec-3 .list{
    background-color: #fff;
}
#sec-3 .list li{
    padding: calc(30 / var(--sec3-width) * 100%) 0 0;
    background-image: url(../image/sec3/bg_3.svg);
    background-repeat: no-repeat;
    background-size: calc(296 / var(--sec3-width) * 100%) auto;
    background-position: bottom center;
}
#sec-3 .list li:last-child{
    background: none;
}
#sec-3 .list-title{
    position: relative;
    text-align: center;
}
#sec-3 .list-title h3{
    display: inline-block;
    position: relative;
    color: var(--brown);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}
#sec-3 .list-title h3.with-ruby{
    line-height: 1.7;
}
#sec-3 .list-title h3 ruby rp,
#sec-3 .list-title h3 ruby rt{
    font-size: .5em;
    line-height: 1;
}
#sec-3 .list-title h3 .category{
    font-size: 1rem;
    font-weight: 600;
}
#sec-3 .list-title h3 .icon{
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    width: calc(42 / var(--base-width) * var(--100vw));
}
#sec-3 .list li:nth-child(1) .list-title h3 .icon{
    left: -2%;
    bottom: 27%;
}
#sec-3 .list li:nth-child(2) .list-title h3 .icon{
    left: -5%;
    bottom: 19%;
}
#sec-3 .list li:nth-child(3) .list-title h3 .icon{
    left: -1%;
    bottom: 30%;
}
#sec-3 .list li:nth-child(4) .list-title h3 .icon{
    left: -1%;
    bottom: 28%;
}
#sec-3 .list li:nth-child(5) .list-title h3 .icon{
    left: -8%;
    bottom: 29%;
}
#sec-3 .list li:nth-child(6) .list-title h3 .icon{
    left: -2%;
    bottom: 30%;
}
#sec-3 .list li:nth-child(7) .list-title h3 .icon{
    left: -2%;
    bottom: 27%;
}
#sec-3 .list li:nth-child(8) .list-title h3 .icon{
    left: -1%;
    bottom: 29%;
}
#sec-3 .list li:nth-child(9) .list-title h3 .icon{
    left: 0%;
    bottom: 35%;
}
#sec-3 .list li:nth-child(10) .list-title h3 .icon{
    left: -2%;
    bottom: 27%;
}
#sec-3 .list li:nth-child(11) .list-title h3 .icon{
    left: -1%;
    bottom: 37%;
}
#sec-3 .list li:nth-child(12) .list-title h3 .icon{
    left: 1%;
    bottom: 40%;
}
#sec-3 .list-title .balloon{
    position: absolute;
    width: calc(119 / 335 * 100%);
}
#sec-3 .list li:nth-child(5) .list-title .balloon{
    bottom: -18%;
    right: -3%;
}
#sec-3 .list li:nth-child(9) .list-title .balloon{
    bottom: 57%;
    right: -3%;
}
#sec-3 .list-image{
    position: relative;
    width: calc(295 / var(--sec3-width) * 100%);
    margin: calc(20 / var(--sec3-width) * 100%) auto 0;
}
#sec-3 .list-image figcaption{
    position: absolute;
    bottom: 0;
}
#sec-3 .list-image figcaption.left{
    left: 0;
}
#sec-3 .list-image figcaption.right{
    right: 0;
}
#sec-3 .list li:nth-child(1) .list-image figcaption{
    width: calc(76 / var(--base-width) * var(--100vw));
    left: -9%;
    bottom: 9%;
}
#sec-3 .list li:nth-child(2) .list-image figcaption{
    width: calc(87 / var(--base-width) * var(--100vw));
    right: -11%;
    bottom: 7%;
}
#sec-3 .list li:nth-child(3) .list-image figcaption{
    width: calc(78 / var(--base-width) * var(--100vw));
    left: -11%;
    bottom: -2%;
}
#sec-3 .list li:nth-child(4) .list-image figcaption{
    width: calc(87 / var(--base-width) * var(--100vw));
    right: -10%;
    bottom: 9%;
}
#sec-3 .list li:nth-child(5) .list-image figcaption{
    width: calc(77 / var(--base-width) * var(--100vw));
    left: -9%;
    bottom: 13%;
}
#sec-3 .list li:nth-child(6) .list-image figcaption{
    width: calc(86 / var(--base-width) * var(--100vw));
    right: -10%;
    bottom: 11%;
}
#sec-3 .list li:nth-child(7) .list-image figcaption{
    width: calc(74 / var(--base-width) * var(--100vw));
    left: -9%;
    bottom: 10%;
}
#sec-3 .list li:nth-child(8) .list-image figcaption{
    width: calc(81 / var(--base-width) * var(--100vw));
    right: -10%;
    bottom: 11%;
}
#sec-3 .list li:nth-child(9) .list-image figcaption{
    width: calc(73 / var(--base-width) * var(--100vw));
    left: -10%;
    bottom: -8%;
}
#sec-3 .list li:nth-child(10) .list-image figcaption{
    width: calc(91 / var(--base-width) * var(--100vw));
    right: -11%;
    bottom: 10%;
}
#sec-3 .list li:nth-child(11) .list-image figcaption{
    width: calc(82 / var(--base-width) * var(--100vw));
    left: -11%;
    bottom: -4%;
}
#sec-3 .list li:nth-child(12) .list-image figcaption{
    width: calc(92 / var(--base-width) * var(--100vw));
    right: -11%;
    bottom: -6%;
}
#sec-3 .list-sentence{
    padding: calc(18 / var(--sec3-width) * 100%) calc(20 / var(--sec3-width) * 100%) calc(45 / var(--sec3-width) * 100%);
}
#sec-3 .list li:last-child .list-sentence{
    padding-bottom: calc(22 / var(--sec3-width) * 100%);
}
#sec-3 .list-sentence p.lead{
    color: var(--brown);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

#sec-3 .list-sentence h4{
    padding: calc(10 / var(--sec3-width) * 100%) 0 calc(13 / var(--sec3-width) * 100%);
    color: var(--purple);
    font-size: 1.4375rem;
    font-weight: 800;
    line-height: 1.39;
    text-align: center;
}
#sec-3 .list li:nth-child(4) .list-sentence h4 span.narrow{
    letter-spacing: -.02em;
}
#sec-3 .list li:nth-child(5) .list-sentence h4 span.narrow{
    letter-spacing: -.05em;
}
#sec-3 .list-sentence h4 span.yen{
    font-size: 1.25rem;
}
#sec-3 .list-sentence h4 span.small{
    vertical-align: super;
    font-size: 1rem;
}
#sec-3 .list-sentence p{
    color: var(--brown);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625;
}

#sec-4{
    margin: calc(29 / var(--base-width) * 100%) auto 0;
}
#sec-4 .is_before{
    position: relative;
}
#sec-4 h2{
    position: absolute;
    width: calc(235 / var(--base-width) * 100%);
    left: 50%;
    bottom: 17px;
    transform: translateX(-50%);
}
#sec-4 .content{
    background-color: var(--purple);
    padding: 0 0 calc(74 / var(--base-width) * 100%);
}
#sec-4 .content .content-inner{
    width: calc(335 / var(--base-width) * 100%);
    margin: 0 auto;
    padding: calc(30 / var(--base-width) * 100%) 0 calc(32 / var(--base-width) * 100%);
    background-color: #fff;
    border-radius: 12px;
}
#sec-4 .content-lead p.is_first{
    color: var(--brown);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
#sec-4 .content-lead .content-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(7 / 335 * 100%) calc(20 / 335 * 100%) calc(23 / 335 * 100%);
}
#sec-4 .content-lead .content-flex .left{
    width: calc(104 / 292 * 100%);
}
#sec-4 .content-lead .content-flex .right{
    width: calc(179 / 292 * 100%);
}
#sec-4 .content-lead p.is_add{
    position: relative;
    width: calc(295 / 335 * 100%);
    padding: 20px 0 23px;
    margin: 0 auto;
    color: var(--brown);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.625;
    text-align: center;
    border-style: solid;
    border-width: 2px;
    border-color: var(--purple);
    border-radius: 20px;
}
#sec-4 .content-lead p.is_add .is_before,
#sec-4 .content-lead p.is_add .is_after{
    position: absolute;
    left: 50%;
}
#sec-4 .content-lead p.is_add .is_before{
    width: calc(89 / 295 * 100%);
    top: 0;
    transform: translate(-50%, -50%);
}
#sec-4 .content-lead p.is_add .is_after{
    width: calc(41 / 295 * 100%);
    bottom: 0;
    transform: translate(-50%, 65%);
}
#sec-4 .content-list{
    width: calc(295 / 335 * 100%);
    margin: 0 auto;
    padding: calc(26 / 295 * 100%) 0 0;
}
#sec-4 .content-list ul{
}
#sec-4 .content-list ul li{
    background-color: var(--purple-2);
}
#sec-4 .content-list h3{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: calc(255 / 295 * 100%);
    margin: 0 auto;
    padding: calc(5 / 295 * 100%) 0 calc(13 / 295 * 100%);
    color: var(--purple);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    background-image: url(../image/sec4/dotted_1.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
}
#sec-4 .content-list h3 .icon{
    width: calc(20 / 255 * 100%);
}
#sec-4 .content-list .definitions{
    width: calc(255 / 295 * 100%);
    margin: calc(12 / 295 * 100%) auto 0;
}
#sec-4 .content-list .definitions dl{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    padding: 0 0 5px;
}
#sec-4 .content-list .definitions dt{
    min-width: 40px;
    padding: 0 6px;
    color: #fff;
    font-size: .875rem;
    line-height: 1.57;
    border-radius: 20px;
    background-color: var(--brown);
}
#sec-4 .content-list .definitions dd{
    color:var(--brown);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.375;
}
#sec-4 .content-list .definitions dd span{
    letter-spacing: -.13em;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}
#sec-4 .content-list .list-images{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: calc(255 / 295 * 100%);
    margin: calc(12 / 295 * 100%) auto 0;
    padding: 0 0 calc(16 / 295 * 100%);
}
#sec-4 .content-list .list-images .txt-icn{
    position: absolute;
    top: -4%;
    right: -10%;
    width: calc(67 / 255 * 100%);
    transform: translateY(-100%);
}
#sec-4 .content-list .list-images figure{
    position: relative;
    width: calc(82 / 255 * 100%);
    padding: 0 0 calc(18 / 255 * 100%);
}
#sec-4 .content-list .list-images figcaption{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    color: var(--brown);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
#sec-4 .content-list .list-images p.copyright{
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--brown);
    font-size: .5rem;
    font-weight: 600;
    text-align: right;
}
#sec-4 .content-list .list-1st .list-flex{
    position: relative;
    width: calc(260 / 295 * 100%);
    margin: calc(8 / 295 * 100%) auto 0;
    padding: 0 0 calc(22 / 295 * 100%);
}
#sec-4 .content-list .list-1st .list-flex .left{
    width: calc(152 / 260 * 100%);
}
#sec-4 .content-list .list-1st .list-flex .right{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(113 / 260 * 100%);
}
#sec-4 .content-list .list-add p{
    color: var(--brown);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
#sec-4 .content-list .list-add p.is_1st{
    width: calc(91 / 295 * 100%);
    margin: 0 auto;
}
#sec-4 .content-list .list-add p.is_2nd{
    padding: calc(6 / 295 * 100%) 0 calc(11 / 295 * 100%);
}
#sec-4 .content-list .list-add p.is_2nd span{
    color: var(--purple);
    font-size: 1.25rem;
    font-weight: 800;
}
#sec-4 .content-list .list-add p.is_3rd{
    width: calc(117 / 295 * 100%);
    margin: 0 auto;
    color: var(--purple);
    font-size: 1rem;
    line-height: 1.875;
    border-style: solid;
    border-width: 1px;
    border-radius: 30px;
}
#sec-4 .content-list .sub-list{
    width: calc(255 / 295 * 100%);
    margin: calc(20 / 295 * 100%) auto 0;
}
#sec-4 .content-list .sub-list h4{
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.75;
    letter-spacing: .02em;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    background-image: url(../image/sec4/bg_4.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
#sec-4 .content-list .sub-list ul{
    padding: calc(16 / 295 * 100%) 0 0;
}
#sec-4 .content-list .sub-list li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    padding: 0 0 calc(19 / 255 * 100%);
}
#sec-4 .content-list .sub-list li:last-child{
    padding: 0;
}
#sec-4 .content-list .sub-list li .sub-list-image{
    position: relative;
    width: calc(83 / 255 * 100%);
    height: 0;
    padding: calc(83 / 255 * 100%) 0 0;
    background-image: url(../image/sec4/bg_5.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
#sec-4 .content-list .sub-list li .sub-list-image picture{
    position: absolute;
    top: 50%;
    left: 50%;
}
#sec-4 .content-list .sub-list li .sub-list-image.img-1 picture{
    width: calc(81 / var(--base-width) * var(--100vw));
    transform: translate(-47%, -47%);
}
#sec-4 .content-list .sub-list li .sub-list-image.img-2 picture{
    width: calc(71 / var(--base-width) * var(--100vw));
    transform: translate(-50%, -54%);
}
#sec-4 .content-list .sub-list li .sub-list-image.img-3 picture{
    width: calc(50 / var(--base-width) * var(--100vw));
    transform: translate(-50%, -49%);
}
#sec-4 .content-list .sub-list li .sub-list-image.img-4 picture{
    width: calc(71 / var(--base-width) * var(--100vw));
    transform: translate(-48%, -48%);
}
#sec-4 .content-list .sub-list li .sub-list-image.img-5 picture{
    width: calc(88 / var(--base-width) * var(--100vw));
    transform: translate(-50%, -50%);
}
#sec-4 .content-list .sub-list li .sub-list-content h5{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 10px 4px;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 24px;
    background-color: var(--brown);
}
#sec-4 .content-list .sub-list li .sub-list-content h5 span{
    font-size: .875rem;
}
#sec-4 .content-list .sub-list li .sub-list-content p{
    padding: 5px 0 0;
    color: var(--purple);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.375;
}
#sec-4 .content-list .sub-list li .sub-list-content p span{
    color: var(--brown);
    font-weight: 600;
}
#sec-4 .content-list .bottom-dotted{
    padding: calc(27 / 295 * 100%) 0 calc(15 / 295 * 100%);
}
#sec-4 .content-list .list-2nd .list-flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
/*    margin: calc(8 / 295 * 100%) auto 0;*/
    margin: 0 auto;
    gap: 7px;
}
#sec-4 .content-list .list-2nd .list-flex .left{
    flex: 1;
    padding: 6px 0 0 calc(17 / 295 * 100%);
}
#sec-4 .content-list .list-2nd .list-flex .right{
    width: calc(200 / 295 * 100%);
}
#sec-4 .content-list .list-lead{
    width: calc(248 / 295 * 100%);
    margin: 0 auto;
    padding: calc(13 / 295 * 100%) 0 calc(14 / 295 * 100%);
}
#sec-4 .content-list .list-2nd .list-add p.is_2nd{
    width: calc(256 / 295 * 100%);
    margin: 0 auto;
}
#sec-4 .content-list .list-3rd h3{
    line-height: 1.4;
    text-align: center;
}
#sec-4 .content-list .definitions dl.is_special{
    display: block;
    padding: calc(16 / 295 * 100%) 0 calc(13 / 295 * 100%);
}
#sec-4 .content-list .definitions .is_special dt{
    display: block;
    position: relative;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}
#sec-4 .content-list .definitions .is_special dt span{
    display: inline-block;
    min-width: 40px;
    padding: 0 8px;
    border-radius: 20px;
    background-color: var(--brown);
}
#sec-4 .content-list .definitions .is_special dt:after{
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(172 / 255 * 100%);
    height: 1px;
    background-color: var(--purple);
}
#sec-4 .content-list .definitions .is_special dd{
    line-height: 1.5;
}
#sec-4 .content-list .definitions .is_special .dd-list{
    padding: calc(9 / 255 * 100%) 0 0;
}
#sec-4 .content-list .definitions .is_special .dd-list ol > li{
    position: relative;
    padding: 0 0 0 calc(1rem + 5px);
}
#sec-4 .content-list .definitions .is_special .dd-list ol > li > span{
    position: absolute;
    left: 0;
}
#sec-4 .content-list .definitions .is_special .dd-list ul > li{
    display: flex;
    align-items: center;
    gap: 5px;
}
#sec-4 .content-list .definitions .is_special .dd-list ul > li > span{
    color: var(--purple);
    font-size: 0.6875rem;
}
#sec-4 .content-list .definitions .is_special .dd-lead-1st .arrow{
    padding: calc(13 / 255 * 100%) 0 calc(20 / 255 * 100%);
}
#sec-4 .content-list .definitions .is_special .dd-lead-1st p{
    width: calc(251 / 255 * 100%);
    margin: 0 auto;
}
#sec-4 .content-list .definitions .is_special .dd-lead-2nd .arrow{
    padding: calc(19 / 255 * 100%) 0 calc(18 / 255 * 100%);
}
#sec-4 .content-list .definitions .is_special .dd-lead-2nd p{
    color: var(--brown);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
#sec-4 .content-list .definitions .is_special .dd-lead-2nd p.caution{
    padding: calc(17 / 255 * 100%) 0 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.57;
    text-align: left;
}
footer{
    position: relative;
    padding: calc(23 / var(--base-width) * 100%) 0 calc(19 / var(--base-width) * 100%);
    color: #fff;
    font-size: .6875rem;
    line-height: 1;
    background-color: var(--brown);
    text-align: center;
}
footer a{
    display: block;
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translate(-50%, -100%);
    width: calc(133 / var(--base-width) * 100%);
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .1em;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}
footer a span{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: max-content;
}

#menu{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--purple-2);

    --menu-width: 315;
}
#menu .inner{
    padding: calc(15 / var(--base-width) * 100%) calc(30 / var(--base-width) * 100%) calc(30 / var(--base-width) * 100%);
}
#menu .header{
    display: flex;
    justify-content: space-between;
    padding: 0 0 calc(24 / var(--menu-width) * 100%);
}
#menu .header p{
    width: calc(209 / var(--menu-width) * 100%);
    padding: calc(10 / var(--menu-width) * 100%) 0 0;
}
#menu .header a{
    display: block;
    width: calc(47 / var(--menu-width) * 100%);
    margin: 0 -8px 0 0;
}
#menu nav ul{
    padding: 0 0 calc(34 / var(--menu-width) * 100%);
    background-image: url(../image/menu/dotted_1.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
}
#menu nav li{
    background-image: url(../image/menu/dotted_1.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}
#menu nav li a{
    display: block;
    padding: calc(20 / var(--menu-width) * 100%) 0 calc(19 / var(--menu-width) * 100%) calc(38 / var(--menu-width) * 100%);
    color:var(--brown);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1;
    background-image: url(../image/menu/arw_1.svg);
    background-repeat: no-repeat;
    background-size: calc(12 / var(--menu-width) * 100%) auto;
    background-position: left calc(14 / var(--menu-width) * 100%) center;
}
#menu .other-content{
    background-image: url(../image/menu/bg_1.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
#menu .other-content h2{
    width: calc(263 / var(--menu-width) * 100%);
    margin: 0 auto;
    padding: calc(40 / var(--menu-width) * 100%) 0 0;
}
#menu .other-content .lead{
    width: calc(200 / var(--menu-width) * 100%);
    margin: calc(18 / var(--menu-width) * 100%) auto 0 ;
}
#menu .other-content .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(263 / var(--menu-width) * 100%);
    margin: calc(18 / var(--menu-width) * 100%) auto 0 ;
    padding: 0 0 calc(38 / var(--menu-width) * 100%);
}
#menu .other-content .flex .left{
    width: calc(95 / 263 * 100%);
}
#menu .other-content .flex .right{
    width: calc(158 / 263 * 100%);
}
#left-contents{
    display: none;
}


@media (min-width: 768px) {
/* タブレット・PC向け */
:root{
    --100vw: calc(100vw - 363px); /* 363 = 40 * 3 + 12 * 2 + 2 * 4 + 211*/
}
html{
    font-size: clamp(16px, calc(4.26 * var(--100vw) / 100), 32px);
}
body::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background: url(../image/main_bg_1.svg);
    background-repeat: repeat;
    background-size: 100px 100px;
    background-position: top center;
}
.sp{
    display: none;
}
.pc{
    display: block;
}
main{
    position: relative;
    width: 100%;
    max-width: 1080px;
    padding: 113px 40px 0;
    margin: 0 auto;
}
#pc-bg{
    position: fixed;
    top: 0; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: calc(100% - 56px);
    height: 750px;
}
#pc-bg .inner{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--purple-3);
    background-image: url(../image/pc/border_2.svg);
    background-repeat: repeat-x;
    background-size: auto 5.1px;
    background-position: center bottom 8px;
}
#pc-bg .inner::before,
#pc-bg .inner::after{
    content: '';
    position: absolute;
    top: 0;
    width: 28px;
    height: 750px;
    background-image: url(../image/pc/border_1.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right bottom;
}
#pc-bg .inner::before{
    left: -27px;
}
#pc-bg .inner::after{
    right: -27px;
    transform: scale(-1, 1);
}
#main-content{
    position: relative;
    width: calc(100% - 251px);
    z-index: 2;
    padding: 12px;
    border-style: solid;
    border-width: 2px;
    border-color: var(--brown);
    border-radius: 54px;
    background-color: #fff;
}
#main-content .main-inner{
    border-style: solid;
    border-width: 2px;
    border-color: var(--brown);
    border-radius: 40px;
}
#main-content header{
    display: none;
}
#menu{
    display: block;
    position: fixed;
/*    position: absolute;*/
    top: 183px;
    left: auto;
    right: 40px;
    z-index: 2;
    width: 211px;
    height: auto;
    overflow-y: visible;
    background-color: transparent;

    --menu-width: 211;
}
#menu .inner{
    position: relative;
    padding: 0;
}
#menu .header{
    display: none;
}
#menu .icn{
    width: 90px;
    padding: 0 0 20px;
}
#menu nav ul{
    padding: 0 0 40px;
}
#menu nav li a{
    display: block;
    padding: 13px 0 12px 18px;
/*    font-size: 1rem;*/
    font-size: 16px;
    background-size: 7px auto;
    background-position: left 4px center;
}
#menu .other-content{
    background-image: url(../image/pc/menu/bg_1.svg);
    background-position: top center;
}
#menu .other-content h2{
    width: 173px;
    padding: 27px 0 0;
}
#menu .other-content .lead{
    width: 160px;
    margin: 10px auto 0 ;
}
#menu .other-content .flex{
    width: 169px;
    margin: 8px auto 0 ;
    padding: 0 0 20px;
}
#menu .other-content .flex .left{
    width: 64px;
}
#menu .other-content .flex .right{
    width: 99px;
}
#menu .heart{
    position: absolute;
    top: -93px;
    left: 21px;
    z-index: 2;
    width: 180px;
}
#pc-pattern{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 55px;
    background-image: url(../image/pc/pattern_1.svg);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: top center;
}
footer a{
    cursor: pointer;
}
}
@media (min-width: 1000px) {
/* タブレット・PC向け */
:root{
    --100vw: 375px;
}
html{
    font-size: 16px;
}
/*main::before{
    max-width: 1080px;
}*/
#pc-bg{
    max-width: 1024px;
}
#main-content{
    width: calc(100% - 551px);
    max-width: 407px;
    margin: 0 auto;
}
#sec-1 .sec-inner{
    border-width: 5px;
}
#menu{
    right: calc(50vw - 540px + 76px);
}
#left-contents{
    display: block;
    position: fixed;
    left: calc(50vw - 540px + 52px);
    top: 92px;
    z-index: 2;
    width: 260px;
}
#left-contents h1{
    width: 278px;
    margin: 0 0 0 -15px;
}
#left-contents p{
    width: 233px;
    margin: 20px auto 0;
}
#left-contents ul{
    display: flex;
    justify-content: space-between;
    padding: 36px 0 0;
}
#left-contents ul li{
    width: 83px;
}
#left-contents ul li figure picture{
    position: relative;
    display: block;
    width: 83px;
    height: 83px;
    background-color: #fff;
    border-radius: 83px;
}
#left-contents ul li figure picture img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
}
#left-contents ul li figure figcaption{
    padding: 13px 0 0;
}
#left-contents ul li:nth-child(1) figure picture img{
    width: 85px;
    transform: translate(-50%, -55%);
}
#left-contents ul li:nth-child(2) figure picture img{
    width: 59px;
    transform: translate(-50%, -55%);
}
#left-contents ul li:nth-child(3) figure picture img{
    width: 56px;
    transform: translate(-50%, -55%);
}
}