@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
/* The following line is used to measure usage of this code. You can remove it if you want. */


body {
  /* 日本語環境で視認性が高い、モダンなゴシック体を優先 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  
  /* レンダリングを安定させるための追加設定 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@font-face {
}
@font-face {
}


.screen a {
  display: contents;
  text-decoration: none;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

.text {
  letter-spacing: 0;
  position: absolute;
  white-space: nowrap;
}




/* screen - index */

a:visited {color: #000}

@media screen and (min-width: 900px) {
	/* 960px以上に適用されるCSS（PC用） */

  .yin-tuyue-sitop-sp.screen {
    width: 900px;
    margin: 0 auto;
}

section.header-section {
    background-color: #fff;
}

.headtop {
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
    flex-direction: row;
    height: 30px;
    /* background-color: #ececec; */
    /* align-content: center; */
    /* align-items: center; */
    width: 100%;
}
.headtop01 {
    width: 50%;
    background-color: #c2c2c2;
    padding: 7px;
}

.headtop02{
    color: var(--black);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    width: 50%;
    background-color: #ececec;
    padding: 9px;
}


.headview01 {
    text-align: center;
    font-size: 20px;
    padding: 10px;
    margin: 20px 65px;
    /* text-decoration: solid 1px #000; */
    border: 1px solid #ff3f3f;
    border-radius: 30px;
    color: #ff3f3f;
    font-weight: 600;
}

.headview02 {
    text-align: center;
    font-size: 42px;
    padding: 8px;
    margin: 10px;
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 800;
}

.headview03 {
    text-align: center;
    font-size: 18px;
    padding: 0px 5px 30px 5px;
    /* margin: 10px; */
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 400;
}

    .area {
        display: flex;
        flex-direction: column;
        /* width: 90%; */
        margin: 10px 80px;
        background-color: #e3e3e3;
        text-align: center;
        padding: 10px;
        border-radius: 18px;
        padding: 20px 10px;
    }


    .area01 {
    text-align: center;
    font-size: 22px;
    padding: 0px 5px 10px 5px;
    /* margin: 10px; */
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 800;
}

    .area02 {
        text-align: center;
        font-size: 20px;
        padding: 0px 5px 10px 5px;
        /* margin: 10px; */
        /* text-decoration: solid 1px #000; */
        /* border: 1px solid #ff3f3f; */
        /* border-radius: 30px; */
        color: #2c2c2c;
        font-weight: 400;
    }

img.headbtn01 {
   width: 67%;
    display: block;
    margin: auto;
    padding: 0px 8px;
}
img.headbtn01-2 {
   width: 70%;
    display: block;
    margin: auto;
    padding: 0px 8px;

}
img.headbtn02 {
           width: 71%;
    display: block;
    margin: auto;
    padding: 0px 8px;
}

img.headbtn03 {
   width: 69%;
    display: block;
    margin: auto;
    padding: 0px 8px;
}

img.headbtn03-1 {
   width: 78%;
    display: block;
    margin: auto;
    padding: 0px 8px;
}
img.headbtn03-2 {
   width: 70%;
    display: block;
    margin: auto;
    padding: 0px 8px;
}

img.headbtn03b {
    width: 60%;
    display: block;
    margin: auto;
    padding: 2px 8px;
}

img.headbtn04 {
    width: 80%;
    display: block;
    margin: auto;
    padding: 0px 8px;
        max-width: 100%;
    height: auto;
}
img.headbtn05 {
    width: 80%;
    display: block;
    margin: auto;
    padding: 3px 8px;
}




 .areatext h3 {
    width: 100%;
    line-height: 32px;
     text-align: center;
    font-size: 22px;
}


    .areared {
        display: flex;
        flex-direction: row;
        background-color: #f7dbdb;
        padding: 10px 0px;
        margin: 14px 94px;
        border-radius: 8px;
    }

    .areared01 {
        width: 12%;
        margin-right: -14px;
    }

.areared01 img {
    width: 66%;
    padding: 7px 0px 7px 13px;
}

    .areared02 {
        font-size: 18px;
        line-height: 25px;
        color: #ff1111;
    }

    .areared03 {
        padding-left: 94px;
        width: 100%;
        margin-top: -8px;
        font-size: 14px;

    }

    .flowareared {
    text-align: center;
    background-color: #fff;
    border: solid 2px #ff0707;
    margin: 12px 100px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    color: #ff0707;
    padding: 10px 0px;
}

.flowarea01 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    /* border: solid; */
    /* contain-intrinsic-block-size: auto 100px; */
    /* background: linear-gradient(yellow); */
    /* background: linear-gradient(transparent 70%, yellow 70%); */
    padding-bottom: 10px;
}

    .flowarea01 h3 {
        width: 55%;
        text-align: center;
        margin: 0 auto;
        font-size: 36px;
        padding-top: 14px;
         font-weight: 700;
    }

    section.barblack-section {
        margin-bottom: 15px;
        background-color: #fdeeee;
        padding: 20px 0px;
      
        margin: auto;
    }

    .barblack {
        text-align: center;
        font-size: 18px;
        padding: 8px;
        margin: 10px 58px;
        /* text-decoration: solid 1px #000; */
        border: 1px solid #000;
        background-color: #000;
        border-radius: 30px;
        color: #fff;
        font-weight: 600;
    }

.barblackimg {
    margin: 0 auto;
    text-align: center;
        padding-top: 10px;
}

    .barblackimg img {
        width: 74%;
        text-align: center;
        margin: 0 auto;
    }


    section.tel-section {
    padding: 40px 20px;
}




.tel-text01 {
    text-align: center;
    margin: 0 auto;
    font-size: 26px;
    font-weight: 800;
    color: #f21919;
}

.tel-text02 {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 700;
}

.tel-text03 {
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 600;
    color: #f21919;
        padding-bottom: 5px;
}
.qa-0 {
    width: 90%;
    margin: auto;
}

    .qa-1 {
        /* margin-bottom: 22px; */
        width: 90%;
        margin: auto;
    }

h1.qatitle {
    background-color: #e1e1e1;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 0px;
}



.accordion-005 {
    max-width: 100%;
}

.accordion-005:not([open]) {
 
}

.accordion-005 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-color: #f2f2f2;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
        line-height: 20px;
}

.accordion-005 summary::-webkit-details-marker {
    display: none;
}

.accordion-005 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #c2c2c2;
    border-right: 3px solid #c2c2c2;
    content: '';
    transition: transform .3s;
        line-height: 20px;
}

.accordion-005[open] summary::after {
    transform: rotate(225deg);
}

.accordion-005 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-005 h3 {
padding: 16px;
    line-height: 20px;

}


.accordion-005[open] p {
    transform: none;
    opacity: 1;
}

.accordion-005[open] h3 {
    transform: none;
    opacity: 1;
}

.qa-1 {
    margin-bottom: 22px;
}

.accordion-006 {
    max-width: 100%;
}

.accordion-006:not([open]) {
    margin-bottom: 20px;
}

.accordion-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-color: #f2f2f2;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-006 summary::-webkit-details-marker {
    display: none;
}

.accordion-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #c2c2c2;
    border-right: 3px solid #c2c2c2;
    content: '';
    transition: transform .3s;
}

.accordion-006[open] summary::after {
    
}

.accordion-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
    transform: none;
    opacity: 1;
}

summary.accordionmore p {
    color: #fb2424;
}
summary.accordionmore {
    background-color: #fdeeee;
}

.qatitle {
    font-size: 20px;
    padding: 8px;
    font-weight: 500;
}


h1.contacttitle {
    background-color: #5f5f5f;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 0px;
    color: #fff;
}

    section.contact-section {
        /* display: flex; */
        /* margin: 18px 0px; */
        /* text-align: center; */
        /* margin: 40px; */
        /* flex-direction: column-reverse; */
        background-color: #fff;
        padding: 60px;
    }
    select {
        width: 100%;
        height: 52px;
        border: solid 2px #bfbfbf;
        border-radius: 4px;
        padding: 0px 4px;
        margin: 5px 0px 40px 0px;
    }

    input[type="text"] {
        width: 100%;
        height: 52px;
        border: solid 2px #bfbfbf;
        border-radius: 4px;
        padding: 0px 4px;
        margin: 5px 0px 40px 0px;
    }

em {
    color: #ff1e1e;
}

    em.formbtn {
        color: #fff;
        font-size: 22px;
    }

.form05-1 {
    text-align: center;
    margin: 0 auto;
}


.zf-submitColor {
        height: 74px;
        width: 76%;
        text-align: center;
        margin: 0 auto;
        border-radius: 60px;
        border: solid 1px #ec0201;
        font-weight: 600;
        margin-top: 10px;
        background-color: #ec0201;
    }
button.submitbtn {

        height: 74px;
        width: 76%;
        text-align: center;
        margin: 0 auto;
        border-radius: 60px;
        border: solid 1px #ec0201;
        font-weight: 600;
        margin-top: 10px;
        background-color: #ec0201;

  }
  
.footer {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 40px;
    background-color: #ececec;
}

.footer01 {
    padding-top: 12px;
    padding-right: 10px;
    font-size: 14px;
}

.footer02 {
    padding-top: 12px;
    padding-left: 10px;
    font-size: 14px;
}


/*==============================================================*/
/*popup template design*/
.popup-background{
  /*position size*/
  position: fixed;
  z-index : 100;
  top : 0;
  left : 0;
  height : 100vh;
  width : 100vw;

  /*design*/
  background-color: gray;
  opacity : 0.5
}
    .popup {
        --height: 360px;
        --width: 360px;
        z-index: 101;
        position: fixed;
        top: calc(50vh - calc(var(--height) / 2));
        left: calc(50vw - calc(var(--width) / 2));
        height: var(--height);
        width: var(--width);
        overflow: hidden;
        background-color: white;
        border-radius: 10px;
        /* box-shadow: 0px 0px 3px 1px gray; */
    }
.popup > .close-button{
  /*position size*/
  --size : 20px;
  position:absolute;
  top : calc(var(--size)/4);
  left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover{
  /*design*/
  background-color: red;
  color : white;
}
.popup > .content{
  padding: 10px;
  text-align: center;
}

.popup > .content2{
  padding: 10px;
  text-align: center;
}

/*hide popup*/
.popup-flag{
  display: none;
}
.popup-flag:not(:checked) + .popup-background{
  display:none;
}
.popup-flag:not(:checked) + * + .popup{
  display:none;
}



/*==============================================================*/
/*custom design*/
    #popupFlag2 + * +.popup {
        /* --height: 150px; */
        /* --width: 150px; */
        --height: 360px;
        --width: 360px;
        z-index: 101;
        position: fixed;
        top: calc(50vh - calc(var(--height) / 2));
        left: calc(50vw - calc(var(--width) / 2));
        height: var(--height);
        width: var(--width);
        overflow: hidden;
        background-color: white;
        border-radius: 10px;
        /* display: block; */
        /* transform: rotate(30deg); */
        box-shadow: 0px 0px 3px 1px gray;
  
  

  /*design*/


  box-shadow: 0px 0px 3px 1px gray;

}
#popupFlag3:not(:checked) + * + .popup{
  /*position size*/
  --height : 0px;

  /*design*/
  transform: rotate(0deg);
  box-shadow: 0px 0px 0px gray;
}



/*==============================================================*/
/*button-container*/
.button-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.button-container > *{

}

/*button1*/
.button-sample1{

}
.button-sample1:hover{

}
.button-sample1:active{

}



.content h3 {
    color: #eb1313;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    padding-top: 5px;
}
.content h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 0px;
}

        .arearedpop {
        display: flex;
        flex-direction: row;
        background-color: #f7dbdb;
        padding: 10px 0px;
        margin: 22px 4px 2px 4px;
        border-radius: 8px;
    }
    .areared01pop img {
        width: 66%;
        padding: 7px 0px 7px 2px;
    }

        .areared01pop {
        width: 20%;
        margin-right: -8px;
    }

        .areared02pop {
        font-size: 11px;
        line-height: 16px;
        color: #ff1111;
        text-align: left;
    }


.content2 h3 {
    color: #eb1313;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    padding-top: 15px;
    text-align: left;
}
.content2 h5 {
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 0px;
    text-align: left;
}

.border {
    border-bottom: solid 1px #000;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
}

    img.headbtn03pop {
        width: 100%;
        display: block;
        margin: auto;
       
    }
    img.headbtn03pop2 {
        width: 96%;
        display: block;
        margin: auto;
       
    }

    /*==============================================================*/
/*privacy*/

.privacy{

background-color: #ffffef;
        width: 42%;
        margin: auto;
}
    .privacytitle {
        margin: auto;
        text-align: center;
        padding: 34px 20px 5px 20px;
        font-size: 26px;
        font-weight: 600;
    }

.privacyli {
    padding: 30px;
    text-align: left;
}

.privacyli h3 {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0px;
    line-height: 24px;
}
.privacyli h5 {
    font-size: 14px;
    line-height: 22px;
}

/*==============================================================*/
/*company*/


.companytitle {
    margin: auto;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
}
.company {
width: 100%;
}

.company th,
.company td {
border: 1px solid #ccc;
padding: 18px;
font-size: 14px;
}

.company th {
font-weight: bold;
background-color: #dedede; 
}





footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

    .companybox {
        width: 40%;
        margin: 0 auto;
        padding: 26px 30px 100px 30px;
    }

section.companysection {
    background-color: #ffffef;
}
tbody tr {
    background-color: #fff;
}

button.zf-submitColor {
    font-size: 22px;
    color: #fff;
}

li.zf-fmFooter {
    text-align: center;
}

h2.zf-frmTitle em {
    display: none;
}
.zf-tempContDiv label {
    display: none;
}



.headview03 {
    font-size: 16px;
    font-weight: 600;
}


.areatextred {
    text-align: center;
    color: #f11111;
    font-weight: 500;
    padding: 2px;
}

.areared10202
{
        font-size: 18px;
        line-height: 24px;
    color: #ff1111;
    margin-top: 10px;
}
.areared102 {
    display: flex;
    flex-direction: row;
    background-color: #f7dbdb;
    padding: 10px 0px;
    margin: -28px 14px 14px 14px;
    border-radius: 8px;
    padding: 0px 0px 12px 0px;
    margin: -22px 94px 14px 94px;
}







/*==============================================================*/
/*fastpop*/
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;

    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    min-width: 500px;
    background-color: #fff;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.3);
}

.onetime_popup_title {
        position: relative;
        padding: 1em 80px;
        margin: 0px;
        background-color: #ffffff;
        color: #000000;
        font-size: 32px;
        text-align: center;
        line-height: 1.5;
}

.onetime_popup_title_close {

}
.onetime_popup_title_close::before,
.onetime_popup_title_close::after {

}
.onetime_popup_title_close::before {

}
.onetime_popup_title_close::after {

}

.onetime_popup_content {
    padding: 60px 30px;
    text-align: center;
}


    .textlan {
    margin: 10px;
    border: solid 2px #000;
    padding: 0px 10px 10px 10px;
}

.textlan h3 {
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    padding-bottom: 8px;
    padding-top: 10px;
    border-bottom: solid 2px #000;
    margin: 0px -10px;
    background-color: #bcbcbc;
}

.textlan h5 {
    line-height: 21px;
    padding-top: 10px;
}

.h1title h1 {
    text-align: center;
    font-size: 20px;
    padding: 14px 4px;
}

/*==============================================================*/
/*非表示*/

    .button-container > * {
        background-color: #fff;
        border: none;
    }
/* ボタンコンテナ */
.button-container {

}

/* 基本ボタンスタイル */
.btnhi {

}



/* 赤色ボタン */


/* 青色ボタン */


/* 黒色ボタン */


/* ボタン内コンテンツ */




/* 非表示スタイル */
.red-button.hidden {
    display: none;
}

/* レスポンシブデザイン */

/* 閉じた状態（ダイアログ）のスタイル */
dialog {
  padding: 10px 0px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* モーダル背景（オーバーレイ） */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
    button#closeBtn {
        /* background-color: #fff; */
        border: none;
        background: transparent;
        outline: none;
    }

    .modal-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    padding: 5px;
}
p.modal-titlep {
    text-align: center;
        line-height: 30px;
    font-size: 20px;
    padding: 5px 0px;
}
    
html:has(dialog[open]) {
  overflow: hidden;
}

}




   /*              PC QED                       */






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

section.header-section {
    background-color: #fff;
}

.headtop {
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
    flex-direction: row;
    height: 30px;
    /* background-color: #ececec; */
    /* align-content: center; */
    /* align-items: center; */
    width: 100%;
}

.headtop01 {
    width: 50%;
    background-color: #c2c2c2;
    padding: 7px;
}

.headtop02{
    color: var(--black);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    width: 50%;
    background-color: #ececec;
    padding: 9px;
}
.headview01 {
    text-align: center;
    font-size: 14px;
    padding: 5px;
    margin: 15px;
    /* text-decoration: solid 1px #000; */
    border: 1px solid #ff3f3f;
    border-radius: 30px;
    color: #ff3f3f;
    font-weight: 600;
}

.headview02 {
    text-align: center;
    font-size: 28px;
    padding: 5px;
    margin: 10px;
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 800;
}

.headview03 {
    text-align: center;
    font-size: 14px;
    padding: 0px 5px 10px 5px;
    /* margin: 10px; */
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 400;
}

.area {
    display: flex;
    flex-direction: column;
    /* width: 90%; */
    margin: 10px;
    background-color: #e3e3e3;
    text-align: center;
    padding: 10px;
    border-radius: 18px;

}

.area01 {
    text-align: center;
    font-size: 20px;
    padding: 0px 5px 10px 5px;
    /* margin: 10px; */
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 800;
}

.area02 {
    text-align: center;
    font-size: 14px;
    padding: 0px 5px 10px 5px;
    /* margin: 10px; */
    /* text-decoration: solid 1px #000; */
    /* border: 1px solid #ff3f3f; */
    /* border-radius: 30px; */
    color: #2c2c2c;
    font-weight: 400;
}

.headbtn {
    width: 100%;
    padding-bottom: 10px;
}

img.headbtn01 {
    width: 100%;
    display: block;
    margin: auto;
    padding: 0px 8px;
    max-width: 100%;
    height: auto;
}

img.headbtn02 {
    width: 100%;
    display: block;
    margin: auto;
    padding: 0px 8px;
    max-width: 100%;
    height: auto;
}

img.headbtn03 {
    width: 100%;
    display: block;
    margin: auto;
    padding: 0px 8px;
    max-width: 100%;
    height: auto;
}

img.headbtn03-1 {
   width: 98%;
    display: block;
    margin: auto;
    padding: 0px 8px;
    max-width: 100%;
    height: auto;
}
img.headbtn03-2 {
   width: 100%;
    display: block;
    margin: auto;
    padding: 0px 8px;
    max-width: 100%;
    height: auto;
}

img.headbtn01-2 {
   width: 100%;
    display: block;
    margin: auto;
    padding: 0px 8px;
    max-width: 100%;
    height: auto;
}
img.headbtn03b {
    width: 100%;
    display: block;
    margin: auto;
    padding: 2px 8px;
    max-width: 100%;
    height: auto;
}
img.headbtn04 {
    width: 100%;
    display: block;
    margin: auto;
    padding: 0px 8px ;
    max-width: 100%;
    height: auto;
}

img.headbtn05 {
    width: 100%;
    display: block;
    margin: auto;
    padding: 3px 8px;
    max-width: 100%;
    height: auto;
}

.areatext {
    width: 100%;
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}

.areatext h3 {
    width: 100%;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
}

.areatextred {
    text-align: center;
    color: #f11111;
    font-weight: 500;
    padding: 2px;
}

.areared {
        display: flex;
        flex-direction: row;
        background-color: #f7dbdb;
        padding: 10px 0px;
        margin: 10px 14px 14px 14px;
        border-radius: 8px;     
}

.areared102 {
    display: flex;
    flex-direction: row;
    background-color: #f7dbdb;
    padding: 10px 0px;
    margin: -28px 14px 14px 14px;
    border-radius: 8px;
}

.areared01 {
    width: 22%;
    margin-right: -14px;
}

.areared01 img {
    width: 66%;
    padding: 7px 0px 7px 13px;
    max-width: 100%;
    height: auto;
}

.areared02 {
    font-size: 12px;
    line-height: 19px;
    color: #ff1111;
}

.areared10202
{
    font-size: 12px;
    line-height: 19px;
    color: #ff1111;
    margin-top: 10px;
}

.areared03 {
    padding-left: 14px;
    width: 100%;
    margin-top: -8px;
    font-size: 14px;
 
}

.flowareared {
    text-align: center;
    background-color: #fff;
    border: solid 2px #ff0707;
    margin: 12px 34px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    color: #ff0707;
    padding: 10px 0px;
}

.flowarea01 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    /* border: solid; */
    /* contain-intrinsic-block-size: auto 100px; */
    /* background: linear-gradient(yellow); */
    /* background: linear-gradient(transparent 70%, yellow 70%); */
    padding-bottom: 10px;
}

.flowarea01 h3 {
    
    width: 73%;
    text-align: center;
    margin: 0 auto;
}

section.barblack-section {
    margin-bottom: 15px;
    background-color: #fdeeee;
          padding: 20px 0px;
}

.barblack {
    text-align: center;
    font-size: 14px;
    padding: 7px;
    margin: 10px 27px;
    /* text-decoration: solid 1px #000; */
    border: 1px solid #000;
    background-color: #000;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
}

.barblackimg {
    margin: 0 auto;
    text-align: center;
        padding-top: 10px;
}

.barblackimg img {
    width: 92%;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}


.tel-text01 {
    text-align: center;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 800;
    color: #f21919;
}

.tel-text02 {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 700;
}

.tel-text03 {
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 600;
    color: #f21919;
        padding-bottom: 5px;
}


h1.qatitle {
    background-color: #e1e1e1;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 0px;
}



.accordion-005 {
    max-width: 100%;
}

.accordion-005:not([open]) {
 
}

.accordion-005 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-color: #f2f2f2;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
        line-height: 20px;
}

.accordion-005 summary::-webkit-details-marker {
    display: none;
}

.accordion-005 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #c2c2c2;
    border-right: 3px solid #c2c2c2;
    content: '';
    transition: transform .3s;
        line-height: 20px;
}

.accordion-005[open] summary::after {
    transform: rotate(225deg);
}

.accordion-005 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-005 h3 {

    padding: 16px;
    line-height: 20px;

}

.accordion-005[open] p {
    transform: none;
    opacity: 1;
}

.accordion-005[open] h3 {
    transform: none;
    opacity: 1;
}

.qa-1 {
    margin-bottom: 22px;
}

.accordion-006 {
    max-width: 100%;
}

.accordion-006:not([open]) {
    margin-bottom: 20px;
}

.accordion-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-color: #f2f2f2;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-006 summary::-webkit-details-marker {
    display: none;
}

.accordion-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #c2c2c2;
    border-right: 3px solid #c2c2c2;
    content: '';
    transition: transform .3s;
}

.accordion-006[open] summary::after {
    
}

.accordion-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
    transform: none;
    opacity: 1;
}

summary.accordionmore p {
    color: #fb2424;
}
summary.accordionmore {
    background-color: #fdeeee;
}

.qatitle {
    font-size: 20px;
    padding: 8px;
    font-weight: 500;
}


h1.contacttitle {
    background-color: #5f5f5f;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 0px;
    color: #fff;
}

    section.contact-section {
        /* display: flex; */
        /* margin: 18px 0px; */
        /* text-align: center; */
        /* margin: 40px; */
        /* flex-direction: column-reverse; */
        background-color: #fff;
        padding: 40px;
                margin-bottom: 18px;
    }

select {
    width: 100%;
    height: 42px;
    border: solid 2px #bfbfbf;
    border-radius: 4px;
    padding: 0px 4px;
    margin: 5px 0px 10px 0px;
}

input[type="text"] {
    width: 100%;
    height: 42px;
    border: solid 2px #bfbfbf;
    border-radius: 4px;
    padding: 0px 4px;
    margin: 5px 0px 10px 0px;
}

em {
    color: #ff1e1e;
}

em.formbtn {
    color: #ffffff;
        font-size: 18px;
}

.form05-1 {
    text-align: center;
    margin: 0 auto;
}


.zf-submitColor {
        height: 62px;
        width: 100%;
        text-align: center;
        margin: 0 auto;
        border-radius: 60px;
        border: solid 1px #ec0201;
        font-weight: 600;
        margin-top: 10px;
        background-color: #ec0201;
}

button.submitbtn {
    height: 62px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    border-radius: 60px;
    border: solid 1px #ec0201;
    font-weight: 600;
    margin-top: 10px;
    background-color: #ec0201;
}


.footer {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 40px;
    background-color: #ececec;
}

.footer01 {
    padding-top: 12px;
    padding-right: 10px;
    font-size: 14px;
}

.footer02 {
    padding-top: 12px;
    padding-left: 10px;
    font-size: 14px;
}


/*==============================================================*/
/*popup template design*/
.popup-background{
  /*position size*/
  position: fixed;
  z-index : 100;
  top : 0;
  left : 0;
  height : 100vh;
  width : 100vw;

  /*design*/

}
    .popup {
        --height: 360px;
        --width: 360px;
        z-index: 101;
        position: fixed;
        top: calc(50vh - calc(var(--height) / 2));
        left: calc(50vw - calc(var(--width) / 2));
        height: var(--height);
        width: var(--width);
        overflow: hidden;
        background-color: white;
        border-radius: 10px;
        /* box-shadow: 0px 0px 3px 1px gray; */
    }
.popup > .close-button{
  /*position size*/
  --size : 20px;
  position:absolute;
  top : calc(var(--size)/4);
  left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color : gray;
  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover{
  /*design*/
  background-color: red;
  color : white;
}
.popup > .content{
  padding: 10px;
  text-align: center;
}

.popup > .content2{
  padding: 10px;
  text-align: center;
}

/*hide popup*/
.popup-flag{
  display: none;
}
.popup-flag:not(:checked) + .popup-background{
  display:none;
}
.popup-flag:not(:checked) + * + .popup{
  display:none;
}



/*==============================================================*/
/*custom design*/
    #popupFlag2 + * +.popup {
        /* --height: 150px; */
        /* --width: 150px; */
        --height: 360px;
        --width: 360px;
        z-index: 101;
        position: fixed;
        top: calc(50vh - calc(var(--height) / 2));
        left: calc(50vw - calc(var(--width) / 2));
        height: var(--height);
        width: var(--width);
        overflow: hidden;
        background-color: white;
        border-radius: 10px;
        /* display: block; */
        /* transform: rotate(30deg); */
        box-shadow: 0px 0px 3px 1px gray;
  
  

  /*design*/


  box-shadow: 0px 0px 3px 1px gray;

}
#popupFlag3:not(:checked) + * + .popup{
  /*position size*/
  --height : 0px;

  /*design*/
  transform: rotate(0deg);
  box-shadow: 0px 0px 0px gray;
}



/*==============================================================*/
/*button-container*/
.button-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.button-container > *{

}

/*button1*/
.button-sample1{

}
.button-sample1:hover{

}
.button-sample1:active{

}



.content h3 {
    color: #eb1313;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    padding-top: 5px;
}
.content h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 0px;
}

        .arearedpop {
        display: flex;
        flex-direction: row;
        background-color: #f7dbdb;
        padding: 10px 0px;
        margin: 22px 4px 2px 4px;
        border-radius: 8px;
    }
    .areared01pop img {
        width: 66%;
        padding: 7px 0px 7px 2px;
        max-width: 100%;
        height: auto;
    }

        .areared01pop {
        width: 20%;
        margin-right: -8px;
    }

        .areared02pop {
        font-size: 11px;
        line-height: 16px;
        color: #ff1111;
        text-align: left;
    }


.content2 h3 {
    color: #eb1313;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    padding-top: 15px;
    text-align: left;
}
.content2 h5 {
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 0px;
    text-align: left;
}

.border {
    border-bottom: solid 1px #000;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
}

    img.headbtn03pop {
        width: 100%;
        display: block;
        margin: auto;
         max-width: 100%;
        height: auto;
    }

    img.headbtn03pop2 {
        width: 96%;
        display: block;
        margin: auto;
       
    }
/*==============================================================*/
/*privacy*/

.privacy{

background-color: #ffffef;

}
    .privacytitle {
        margin: auto;
        text-align: center;
        padding: 34px 20px 5px 20px;
        font-size: 26px;
        font-weight: 600;
    }

.privacyli {
            padding: 30px 30px 100px 30px;
        text-align: left;
}

.privacyli h3 {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0px;
    line-height: 24px;
}
.privacyli h5 {
    font-size: 14px;
    line-height: 22px;
}

/*==============================================================*/
/*company*/


.companytitle {
    margin: auto;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
}
.company {
width: 100%;
}

.company th,
.company td {
border: 1px solid #ccc;
padding: 18px;
font-size: 14px;
}

.company th {
font-weight: bold;
background-color: #dedede; 
}


.company,
.company tr,
.company td,
.company th {display:block;}
.company th {width:auto;}


footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

    .companybox {
        width: 100%;
        margin: 0 auto;
        padding: 26px 30px 100px 30px;
    }

section.companysection {
    background-color: #ffffef;
}
tbody tr {
    background-color: #fff;
}

button.zf-submitColor {
    font-size: 22px;
    color: #fff;
}


h2.zf-frmTitle em {
    display: none;
}

.zf-tempContDiv label {
    display: none;
}

.headview03 {
    font-size: 16px;
    font-weight: 600;
}

/*==============================================================*/
/*fastpop*/
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;

    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 50%;
        min-width: 400px;
}

p.modal-titlep {
    font-size: 14px;
    font-weight: 400;
}

.onetime_popup_title {
        position: relative;
        padding: 1em 10px;
        margin: 0px;
        background-color: #ffffff;
        color: #000000;
        font-size: 22px;
        text-align: center;
        line-height: 1.5;
        font-weight: 500;
}

.onetime_popup_title_close {

}
.onetime_popup_title_close::before,
.onetime_popup_title_close::after {

}
.onetime_popup_title_close::before {

}
.onetime_popup_title_close::after {

}


    .onetime_popup_content {
        padding: 10px 0px;
        text-align: center;
    }

    .textlan {
    margin: 10px;
    border: solid 2px #000;
    padding: 0px 10px 10px 10px;
}

.textlan h3 {
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    padding-bottom: 8px;
    padding-top: 10px;
    border-bottom: solid 2px #000;
    margin: 0px -10px;
    background-color: #bcbcbc;
}

.textlan h5 {
    line-height: 21px;
    padding-top: 10px;
}

.h1title h1 {
    text-align: center;
    font-size: 10px;
    padding: 10px 4px;
}


/*==============================================================*/
/*非表示*/

    .button-container > * {
        background-color: #fff;
        border: none;
    }
/* ボタンコンテナ */
.button-container {

}

/* 基本ボタンスタイル */
.btnhi {

}



/* 赤色ボタン */


/* 青色ボタン */


/* 黒色ボタン */


/* ボタン内コンテンツ */




/* 非表示スタイル */
.red-button.hidden {
    display: none;
}

/* レスポンシブデザイン */


/* 閉じた状態（ダイアログ）のスタイル */
dialog {
  padding: 10px 0px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* モーダル背景（オーバーレイ） */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
    button#closeBtn {
        /* background-color: #fff; */
        border: none;
        background: transparent;
        outline: none;
    }

    .modal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    padding: 5px;
}
p.modal-titlep {
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    padding: 5px 0px;
}


html:has(dialog[open]) {
  overflow: hidden;
}




}