:root{
    --scale: 1;
}

@media (min-width: 1201px) {
    :root{
        --scale: 3;
    }
    
}

img{
    width: calc(100dvw/var(--scale));
}

:root {
    --color-red1: #ed1c24;
    --color-blue1: #0000ff;
    --color-lightgray1: #F2F2F2;
    --color-lightgray2: #F4F4F4;
    --color-lightblue1: #B0CEE1;

}

*{
    font-family: "noto sans JP" sans;
    font-size: calc(3.5dvw/var(--scale));
    line-height: calc(8dvw/var(--scale));
    
}

#fixed_btn{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
}

#fixed_topbtn{
    position: fixed;
    bottom: 95px;
    right: 35%;
    z-index: 1000;
}

#fixed_topbtn img{
    width: 100px;
    
}


@media (min-width: 1201px) {
    #fixed_btn{
        display: none;
    }

    
}

@media (max-width: 1200px) {
    #fixed_topbtn{
        bottom: 20dvw;
        right: 1dvw;
    }

    #fixed_topbtn img{
        
        width: calc(15dvw/var(--scale));
    }
}

#fixed_btn,
#fixed_topbtn{
  opacity: 0;
  pointer-events: none;
  animation: fadeIn 1s linear forwards;
  animation-timeline: scroll();
  animation-range: 100vh 120vh;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ドロワーメニュー */
#drawer {
  position: fixed;
  top: 0;
  left: -80dvw;
  width: 80dvw;
  height: 100%;
  background-position: left top;
  background-size: cover;
  background-color: white;
  background-image: url(../images/menu_bg.png);
  background-repeat: no-repeat;
  color: white;
  transition: left 0.3s ease;
  z-index: 1000;
}

/* 開いた状態 */
#drawer.open {
  left: 0;
}

#drawer ul{
    margin-top: 10dvw;
    font-size: 8dvw;
}


#drawer ul li a{
    font-size: 4.8dvw;
    text-decoration: none;
    font-weight: bold;
    line-height: 15dvw;
    color: black;
    
}

#drawer ul hr{
    width: 65dvw;
    border: none;
    height: 2px;
    background-color: black;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999;
}

#overlay.show {
  opacity: 1;
  visibility: visible;
}

#header_sp{
    position: relative;
}

#header_sp >  div:nth-of-type(1) img{
    width: 100dvw;
}

#header_sp >  div:nth-of-type(2) img{
    width: 10vw;
}

#header_sp > div:nth-of-type(2){
    text-align: right;
    position:absolute;
    top: 1.4vw;
    left: 83vw;
}


#pos-rel {
    width: calc(100dvw/var(--scale));
    margin: 0 auto;
    position: relative;
}

#pos-rel div img:nth-of-type(1) {
    width: calc(100dvw/var(--scale));
}

#pos-rel div img:nth-of-type(2) {
    width: calc(60dvw/var(--scale));
    position: absolute;
    top: calc(138dvw/var(--scale));
    left: 50%;
    transform: translateX(-50%);
}

#pos-rel > div > a > img{
    width: calc(80dvw/var(--scale));
    position: absolute;
    top: calc(146dvw/var(--scale));
    left: 50%;
    transform: translateX(-50%);
}

#pos-rel > div > a > img:hover{
    filter: brightness(1.2);
}

#top_left{
    width: 33.3dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;

    background-position: right top;
    background-size: cover;
    background-color: white;
    background-image: url(../images/top_left_bg.png);
    background-repeat: no-repeat;
    z-index: 99;
}
    

#top_left > div{
    position: relative;
}

#top_left > div > img{
    width: 21dvw;
    margin: 0 auto;
    position: relative;
    top: 13dvw;
}

#top_left > div > a > img{
    width: 28dvw;
    margin: 0 auto;
    position: relative;
    top: 11.3dvw;
    left: 0;
}

#top_left > div > a > img:hover{
    filter: brightness(1.2);
}

#top_right{
    width: 33dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;

    background-position: right top;
    background-size: cover;
    background-color: white;
    background-image: url(../images/menu_bg.png);
    background-repeat: no-repeat;
    z-index: 100;

}

#top_right ul{
    margin-top:10dvw;
    list-style: none;
    padding-left: 4dvw;
}

#top_right ul li {
    line-height: 0;
    padding-left: 1dvw;
}

#top_right ul li a{
    line-height: 4.5dvw;
    font-size: 1.8dvw;
    text-decoration: none;
    font-weight: bold;
    color: black;
}

#top_right ul hr{
    width: 24.2dvw;
    border: none;
    height: 2px;
    background-color: #000;
}


#saiyounayami div{
    margin: 0 auto;
    width: calc(100dvw/var(--scale));
}

#saiyounayami_reason{
    margin: 0 auto;
    width: calc(100dvw/var(--scale));
    background-color: var(--color-lightgray1);
    padding-top: calc(1.5dvw/var(--scale));
    padding-bottom: calc(8dvw/var(--scale));
    
}

#saiyounayami_reason div{
    margin: 0 auto;
    width: calc(90dvw/var(--scale));
    margin-top: calc(5dvw/var(--scale));
    padding-top: calc(7vw/var(--scale));
    padding-bottom: calc(10dvw/var(--scale));
    margin-bottom: calc(5dvw/var(--scale));   
    background-color: white;
    box-shadow: 2px 2px 10px #CCCCCC;

}

#saiyounayami_reason div p{
    margin: 0 auto;
    width: calc(78dvw/var(--scale));
    padding-top: calc(4dvw/var(--scale));
}

.red1{
    color: var(--color-red1);
    font-weight: bold;
}

.red2{
    font-size: calc(7.5dvw/var(--scale));
    color: var(--color-red1);
    font-weight: bold;
}

.blue1{
    color: var(--color-blue1);
    font-weight: bold;
}

.label1{
    font-size: calc(5dvw/var(--scale));
    font-weight: bold;
    display: block;
    text-align: center;
}

.underline{
    text-decoration: underline;
}

#saiyounayami_reason div img{
    margin: 0 auto;
    width: calc(80dvw/var(--scale));
}

#saiyounayami_reason div p img{
    margin: calc(4dvw/var(--scale)) 0;
}

.img-w-80dvw_t-5{
    width: calc(80dvw/var(--scale));
    margin: 0 auto;
    position: relative;
    top: calc(-5dvw/var(--scale));
    margin-bottom: calc(5dvw/var(--scale));
}

.img-w-90dvw{
    width: calc(90dvw/var(--scale));
    margin: 0 auto;
    position: relative;
    margin-bottom: calc(5dvw/var(--scale));
}

#tiktokpoint{
    margin: 0 auto;
    width:calc(90dvw/var(--scale));
    background-color: var(--color-lightgray1);
    padding-top: calc(1.5dvw/var(--scale));
    margin-bottom: calc(12dvw/var(--scale));
}

#tiktokpoint > div{
    margin: 0 auto;
    width: calc(91dvw/var(--scale));
}

#tiktokpoint > div > img{
    margin: 0 auto;
    padding-top: calc(5dvw/var(--scale));
    position: relative;
    top: calc(-11.5dvw/var(--scale));
    width: calc(90dvw/var(--scale));
    
}

#tiktokpoint > div p{
    margin: 0 auto;
    position: relative;
    top: calc(-16dvw/var(--scale));
    width: calc(78dvw/var(--scale));
    padding-top: calc(4dvw/var(--scale));
}

#tiktokpoint > div p .bold{
    font-weight: bold;
}

#tiktokpoint > div p img{
    margin-top: calc(5dvw/var(--scale));
    width: calc(80dvw/var(--scale));
}

#tiktokpoint .point03{
    width: calc(80dvw/var(--scale));
    margin-bottom: calc(5dvw/var(--scale));
}

#tasyatigai div{
    margin: 0 auto;
    width: calc(90dvw/var(--scale));
}

#tasyatigai div p{
    text-align: center;
    margin: 0 auto;
    font-size: calc(7.5dvw/var(--scale));
    line-height: calc(10dvw/var(--scale));
    letter-spacing: calc(-0.4dvw/var(--scale));
    font-weight: bold;
    
}

#seisaku div{
    background-color: var(--color-lightgray2);
    margin: 0 auto;
    width: calc(100dvw/var(--scale));
    padding-bottom: calc(12dvw/var(--scale));
}

#seisaku > div > img{
    width: calc(80dvw/var(--scale));
    margin: 0 auto;
    position: relative;
    margin-top: calc(3dvw/var(--scale));
    padding-top: calc(10dvw/var(--scale));
}

#seisaku > div > a >img:nth-of-type(2){
    width: calc(80dvw/var(--scale));
}

#seisaku > div > a > img:nth-last-child{
    padding-bottom: calc(30dvw/var(--scale));
}

#ryoukin div{
    background-color: white;
    margin: 0 auto;
    width: calc(100dvw/var(--scale));
}

#ryoukin > div > img{
    width: calc(90dvw/var(--scale));
    margin: 0 auto;
    position: relative;
    margin-top: calc(3dvw/var(--scale));
    padding-top: calc(10dvw/var(--scale));
}

#ryoukin div p{
    margin: 0 auto;
    position: relative;
    
    width: calc(78dvw/var(--scale));
    margin-top: calc(5dvw/var(--scale));
    margin-bottom: calc(10dvw/var(--scale));
}

#ryoukin > div img:nth-of-type(2){
    width: calc(100dvw/var(--scale));
    margin: 0 auto;
    
}

#ryoukin > div > div{
    position: relative;
}

#ryoukin > div > div a img{
    position: absolute;
    top: calc(12dvw/var(--scale));
}

#ryoukin > div > div a img:hover{
    filter: brightness(1.2);
}

#soudanunyou div{
    margin: 0 auto;
    width: calc(100dvw/var(--scale));
}

#daihyou{
    padding-top: calc(12dvw/var(--scale));
}

#daihyou > p:nth-of-type(1){
    text-align: center;
    margin: 0 auto;
    font-size: calc(8dvw/var(--scale));
    line-height: calc(10dvw/var(--scale));
    letter-spacing: calc(-0.4dvw/var(--scale));
    font-weight: bold;
    margin-bottom: calc(8dvw/var(--scale));
}

#daihyou > img{
    margin: 0 auto;
    width: calc(85dvw/var(--scale));
    margin-bottom: calc(10dvw/var(--scale));

}

#daihyou > p:nth-of-type(2){
    width: calc(78dvw/var(--scale));
    margin: 0 auto;
    margin-bottom: calc(5dvw/var(--scale));
}

#question{
    margin: 0 auto;
    background-color: var(--color-lightgray2);
    margin-bottom: calc(10dvw/var(--scale));
    padding-top: calc(15dvw/var(--scale));
    padding-bottom: calc(4dvw/var(--scale));
    width: calc(100dvw/var(--scale));
}

#question > p{
    text-align: center;
    font-size: calc(8.5dvw/var(--scale));
    line-height: calc(10dvw/var(--scale));
    letter-spacing: calc(-0.4dvw/var(--scale));
    font-weight: bold;
    padding-bottom: calc(8dvw/var(--scale));
}

#question div{
    margin: 0 auto;
    width: calc(90dvw/var(--scale));
    background-color: white;
    padding-bottom: calc(10dvw/var(--scale));
    margin-bottom: calc(10dvw/var(--scale));
    box-shadow: 2px 2px 10px #CCCCCC;
}

#question div img{
    margin: 0 auto;
    padding-top: calc(2.5dvw/var(--scale));
    width: calc(85dvw/var(--scale));
}

#question div p{
    margin: 0 auto;
    margin-top: calc(5dvw/var(--scale));
    width: calc(80dvw/var(--scale));
}

#toiawase{
    width: calc(90vw/var(--scale));
    margin: 0 auto;
}

#toiawase h1{
    text-align: center;
    font-size: calc(8.6dvw/var(--scale));
    font-weight: bold;
    margin-bottom: calc(5dvw/var(--scale));
}

#toiawase label{
    text-align: left;
    font-weight: bold;
}

#toiawase span{
    color:white;
    font-size: calc(2.9dvw/var(--scale));
    background-color: red;
    padding: 0 calc(1.4dvw/var(--scale)) calc(0.4dvw/var(--scale)) calc(1.4dvw/var(--scale));
    margin-left: calc(2dvw/var(--scale));
    
}

#toiawase input,
#toiawase textarea{
    width: calc(90dvw/var(--scale));
    margin: calc(2dvw 0/var(--scale));
    padding: calc(2dvw/var(--scale)) calc(2dvw/var(--scale));
    
}

#toiawase input[type="checkbox"] {
  width: 11dvw;
}

#toiawase textarea{
    height: calc(50dvw/var(--scale));
    
}

#toiawase .privacy{
    width: calc(90dvw/var(--scale));
    height: 20dvh;
    line-height: calc(5.5dvw/var(--scale));
    background-color: var(--color-lightgray2);
    padding: calc(3dvw/var(--scale));
    /* text-align: center; */
    overflow-y: auto;
    scrollbar-width: none;
}

#toiawase .privacy_chk{
    margin: 10px 0;
}


#toiawase .privacy_chk input{
    width: auto ;
    margin: 0 10px;
}

.privacy_area{
    font-size: 70%;
    line-height: 180%;
}

.privacy_area .p1{
    font-weight: bold;
    font-size: 140%;
}

.privacy_area .p2{
    font-weight: bold;
    font-size: 110%;
}

.privacy_area .p3{
    font-weight: bold;
    font-size: 100%;
}

.privacy_area ul,
.privacy_area ol{
    font-size: 100%;
}

.privacy_area li{
    font-size: 100%;
    line-height: 120%;
}





#toiawase .submitbtn_texttype_btn{
    font-size: calc(5dvw/var(--scale));
    width: calc(90dvw/var(--scale));
    background-color: black;
    color: white;
    text-align: center;
    padding: calc(7dvw/var(--scale));
}

#toiawase .submitbtn_texttype_btn:hover{
    font-weight: bold;
    filter: brightness(1.2);
}

.btn_hover{
    text-decoration: none;
}


footer{
    margin: 0 auto;
    width: calc(100dvw/var(--scale));
    margin-top: calc(4.9dvw/var(--scale));
    text-align: center;
    background-color: black;
    padding: calc(20dvw/var(--scale)) 0;
    color: white;
    position: relative;
    z-index: 1;
}

footer a{
    color: white;
    text-decoration: none;
}

footer a:hover{
    font-weight: bold;
}

footer span{
    color: var(--color-lightblue1);
}

@media (max-width: 1200px) {
    footer{
        padding-bottom: calc(25dvw/var(--scale));
    }
}

/* footer .top_btn{
    width: calc(15dvw/var(--scale));
    position: absolute;
    top: 4dvh;
    right: 5dvw;
}

@media (min-width: 1201px) {
    footer .top_btn{
        right:1dvw;
    }

}

footer .top_btn:hover{
    filter: brightness(1.2);
} */