/*********** common ************/
:root{
    --shigotohaku-color-main:#00753B;
    --shigotohaku-color-sub:#979CA0;
    --shigotohaku-color-background:#EFEFEF;

    --stu-color-main:#e21427;

    /* values:12px-14px  viewport:600px - 1200px  */
    /*--fs14: clamp(0.75rem, 0.5rem + 0.33vw, 0.875rem);*/
    /* values:12px-16px  viewport:600px - 1200px  */
    --fs16:clamp(0.75rem, 0.5rem + 0.67vw, 1rem);
    /* values:14px-18px  viewport:600px - 1200px  */
    --fs18:clamp(0.75rem, 0.5rem + 0.67vw, 1rem);
    /* values:14px-20px  viewport:600px - 1200px  */
    --fs20:clamp(0.875rem, 0.5rem + 1vw, 1.25rem);
    /* values:14px-22px  viewport:600px - 1200px  */
    --fs22:clamp(0.875rem, 0.375rem + 1.33vw, 1.375rem);
    /* values:14px-26px  viewport:600px - 1200px */
    --fs26: clamp(0.875rem, 0.375rem + 1.83vw, 1.625rem);
    /* values:16px-30px  viewport:600px - 1200px  */
    --fs30:clamp(1rem, 0.125rem + 2.33vw, 1.875rem);
    /* values:22px-32px  viewport:600px - 1200px */
    --fs32: clamp(1.375rem, 0.5rem + 1.67vw, 2rem);
    /* values:22px-40px  viewport:600px - 1200px */
    --fs40: clamp(1.375rem, 0.75rem + 2.67vw, 2.5rem);
    /* values:22px-42px  viewport:600px - 1200px */
    --fs42: clamp(1.375rem, 0.375rem + 3.33vw, 2.625rem);
    /* values:30px-50px  viewport:600px - 1200px  */
    --fs50:clamp(1.875rem, 0.625rem + 3.33vw, 3.125rem);
    /* values:36px-60px  viewport:600px - 1200px  */
    --fs60:clamp(2.25rem, 0.75rem + 4vw, 3.75rem);
    /* values:32px-66px  viewport:600px - 1200px */
    --fs66: clamp(2rem, 0.5rem + 5.33vw, 4.125rem);
    /* values:40px-70px  viewport:600px - 1200px */
    --fs70: clamp(2.5rem, 1rem + 5vw, 4.375rem);
    /* values:50px-90px  viewport:600px - 1200px  */
    --fs90:clamp(3.125rem, 0.625rem + 6.67vw, 5.625rem);
}

html{
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

li{
    list-style-type: none;
}

a{
    text-decoration: none;
}

img{
    width: 100%;
    height: auto;
}

.row{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.col2{
    width: 50%;
}
.pc{
    display: block;
}
.sp{
    display: none;
}

/*********** wrapper **********/
.wrapper{
    width: 100%;
    margin: 0 auto;
}

/*********** contents **********/
.contents{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: var(--shigotohaku-color-main);
    font-size: var(--fs30);
    line-height: 2em;
    font-weight: bold;
    position: static;
}

/*********** header **********/
header{}

/*********** nav **********/
nav{}

/*********** sticky **********/
.sticky{
    width: 100%;
    height: 100%;
}
.sticky-contents{
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
    left: 79%;
    width: 199px;
    height: 60px;
    z-index: 100;
}
.sticky-contents-arrow{
    position: sticky;
    position: -webkit-sticky;
    top: 68%;
    left: 50px;
    width: 50px;
    height: auto;
    z-index: 100;
}

.sticky-button{
    background-color: white;
    border: 1px solid var(--shigotohaku-color-main);
    border-radius: 30px;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 58px;
    font-size: 24px;
    color: var(--shigotohaku-color-main);
}
.sticky-button:hover{
    color: white;
    border-color: white;
    background-color: var(--shigotohaku-color-main);
}

/*********** button **********/
.button{
    margin: 1em auto;
    text-align: center;
}

.button a{
    display: inline-block;
    width: 394px;
    padding: 0.2em 1.5em 0.3em 1.5em;
    background-color: white;
    border-radius: 50px;
    border: 2px solid var(--shigotohaku-color-main);
    font-weight: bold;
    color: var(--shigotohaku-color-main);
}

.button a:hover{
    color: white;
    border-color: white;
    background-color: var(--shigotohaku-color-main);
}

section{
    padding: 3.5em 0 2em 0;
}

.header-2{
    margin-left: 27%;
    margin-bottom: 1em;
    font-size: var(--fs90);
    font-family: 'Albert Sans', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 900;
}

/*********** main-image **********/
#main-image{
    padding: 0;
    margin-top: -211px;
}

/*********** read-text **********/
#read-text{
    background-color: var(--shigotohaku-color-background);
    margin-top: -20px;
}

#read-text .button{
    margin-top: 3em;
}

#read-text .row{
    justify-content: center;
    align-items: flex-end;
    gap: 92px;
    /* 全体からテキスト、画像、gap を引いて出した余白を左右2:1に分割する */
    padding-left: calc((100% - (650px + 556px + 92px)) / 3 * 2);
    padding-right: calc((100% - (650px + 556px + 92px)) / 3);
}
#read-text .read-text-text{
    width: 650px;
    height: auto;
}
#read-text .read-text-text h3{
    font-size: var(--fs30);
    letter-spacing: 0.12em;
    margin-bottom: 1em;
}
#read-text .read-text-text p{
    font-size: var(--fs18);
    letter-spacing: 0.04em;
    line-height: 2.2em;
    margin-bottom: 1em;
}
#read-text .read-text-text p:last-of-type {
    margin-bottom: 0;
}

#read-text .read-text-image{
    width: 556px;
    height: auto;
    aspect-ratio: 556 / 416;
    padding-bottom: 1em;
}

#read-text .read-text-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*********** points **********/
#points{
    padding-top: 4.9em;
}
#points h3{
    margin-left: calc(34% + 0.75em);
    font-size: var(--fs32);
    margin-bottom: 1em;
}
#points ul{
    margin-left: 34%;
}
#points .row > .col2:first-of-type{
    width: 3em;
    text-align: center;
    padding: 0 0.5em;
}
#points .row > .col2:nth-of-type(2){
    width: 70%;
    font-size: var(--fs20);
    line-height: 2em;
    padding-left: 0.5em;
}

#points .point-number{
    font-family: 'Albert Sans', sans-serif;
    font-size: var(--fs70);
    padding-top: 0.12em;
    font-weight: 900;
}

#points .point-title{
    font-size: var(--fs22);
    letter-spacing: 0.88px;
}

#points .point-description{
    font-size: var(--fs18);
    color: #5F6264;
    line-height: 1.8em;
    letter-spacing: 0.72px;
}

#points li{
    margin-bottom: 1.8em;
}

#present{
    padding-top: 0;
}
#present .present-framed-box{
    margin: 0 auto;
    padding-left: 2em;
    height: 410px;
    width: 904px;
    border: 4px solid var(--shigotohaku-color-main);
    border-radius: 15px;
}
#present .present-framed-box.row{
    justify-content: center;
    gap: 32px;
}
#present .present-text{
    width: auto;
}
#present .present-text-title{
    font-size: var(--fs42);
    margin-top: 54px;
    margin-bottom: 0.75em;
}
#present .present-text-title > span{
    font-family: 'Albert Sans', sans-serif;
    font-size: var(--fs66);
}
#present .present-text-description{
    font-size: var(--fs30);
    line-height: 1.7em;
}
#present .present-text-annotation{
    font-size: var(--fs18);
    line-height: 1.8em;
    padding-left: 0.5em;
    text-indent: -0.5em;
}
#present .present-image{
    margin: auto 0;
    width: 400px;
    height: 344px;
}
#present .present-image > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*********** arrow **********/
#arrow1,#arrow2,#arrow3{
    width: 100%;
    height: 84px;
    padding: 0;
}

.arrow-top,
.arrow-bottom{
    width: 100%;
    height: 42px;
}
.arrow-circle{
    width: 84px;
    height: 84px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 42px;
    margin-top: -84px;
}
.arrow-circle p{
    font-family: 'Albert Sans', sans-serif;
    font-size: 50px;
    font-weight: bold;
    padding-top: 12px;
}

#arrow1 .arrow-top{
    background-color: white;
}
#arrow1 .arrow-bottom{
    background-color: var(--shigotohaku-color-main);
}
#arrow1 .arrow-circle{
    background-color: white;
}
#arrow2 .arrow-top{
    background-color: var(--shigotohaku-color-main);
}
#arrow2 .arrow-bottom{
    background-color: white;
}
#arrow2 .arrow-circle{
    background-color: var(--shigotohaku-color-main);
}
#arrow2 p{
    color: white;
}
#arrow3 .arrow-top{
    background-color: white;
}
#arrow3 .arrow-bottom{
    background-color: var(--shigotohaku-color-main);
}
#arrow3 .arrow-circle{
    background-color: white;
}


/*********** sns **********/
#sns,
#sns2{
    overflow: hidden;
    margin: 0;
    padding: 1.8em 0 2.2em 0;
    background-color: var(--shigotohaku-color-sub);
}
#sns p,
#sns2 p{
    color: white;
    text-align: right;
    font-size: var(--fs50);
    padding-right: 1.5em;
}

#sns img,
#sns2 img{
    padding-top: 0.2em;
    width: 70%;
    height: auto;
}

/*********** timeline **********/
#timeline{
    background-color: var(--shigotohaku-color-main);
    color: white;
    font-size: var(--fs22);
    padding-top: 7em;
}

#timeline > .row{
    margin-left: 37%;
}

#timeline h3{
    font-size: var(--fs22);
    line-height: 1.8em;
    padding-bottom: 0.6em;
}
.talksession-title{
    padding-bottom: 0 !important;
    text-indent: -6px;
}
.talksession-text{
    padding-left: 0.5em;
    text-indent: -1em;
}

#timeline table{
    border-spacing: 0 1.5em;
}

#timeline tr{
    line-height: 1.8em;
    letter-spacing: 0;
}

#timeline td{
    vertical-align: top;
}

#timeline .row{
    padding-bottom: 30px;
}
#timeline .timetable{
    width: 700px;
}
#timeline .talk-image{
    margin-top: 14em;
    margin-left: -3em;
    padding-top: 10px;
    width: calc(67% - 550px);
    max-width: 249px;
    height:auto;
}

#timeline .time{
    width: 7.5em;
    font-family: 'Albert Sans', sans-serif;
    font-weight: bold;
    font-size: var(--fs22);
}
.timeline-image{
    width: 155px !important;
    height: 155px !important;
    margin-right: 15px;
}

.timeline-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-text{
    width: 272px;
    height: auto;
    padding-top: 5px;
}
.timeline-text p{
    font-size: var(--fs16);
    line-height: 1.7em;
    text-align: justify;
}

.timeline-text .guest-name{
    font-size: var(--fs22);
    margin-top: -10px;
}


/********** exhibitor **********/
#exhibitor{
    padding: 4em 0;
}
#exhibitor h2{
    margin-bottom: 0.8em;
}
#exhibitor h3{
    padding-bottom: 0.5em;
    font-size: var(--fs32);
}

#exhibitor p{
    font-size: var(--fs22);
    color: #5F6264;
    line-height: 1.7em;
}
#exhibitor ul{
    padding: 1em 0 0 2em;
}

#exhibitor .company-list-each{
    width: 66%;
    margin-left: 34%;
    background-color: white;
}
#exhibitor .company-list-each:nth-of-type(2){
    padding-top: 3em;
}
#exhibitor .company-list-each li{
    height: 1.2em;
}
#exhibitor .company-list-each a{
    color: var(--shigotohaku-color-main);
    font-size: var(--fs22);
}
#exhibitor .company-list-each span{
    color: var(--shigotohaku-color-main);
    font-size: var(--fs22);
}


/********** access **********/
#access {
    background-color: var(--shigotohaku-color-main);
    color: white;
    padding-bottom: 0;
}
#access .access-text{
    width: fit-content;
    margin: 0 auto 3em;
    font-size: var(--fs26);
    text-align: left;
    line-height: 1.5em;
    letter-spacing: 0px;
}
#access .access-text > p{
    width: fit-content;
    margin-bottom: 1.5em;
}
#access .access-text > p.no-margin-bottom{
    margin-bottom: 0;
}
#access h3{
    margin-left: 27%;
    font-size: var(--fs40);
    font-family: 'Albert Sans', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 900;
}
#access h3 > span{
    font-size: var(--fs30);
    letter-spacing: 0.05em;
    font-weight: 900;
}
#access a{
    color: white;
}
#access .google-map{
    aspect-ratio: 896 / 596;
    width: 46%;
    height: auto;
    margin: auto;
}
#access .google-map > iframe{
    width: 100%;
    height: 100%;
}

/********** footer **********/
#qanda{
    padding-top: 2.5em;
    background-color: var(--shigotohaku-color-main);
}
.footer{
    line-height: 1.8em;
    padding: 2em 0 3em 0;
    text-align: center;
    color: white;
    background-color: var(--shigotohaku-color-main);
    font-size: var(--fs20);
    letter-spacing: 2.6px;
}

.footer img{
    width: 35%;
    height: auto;
    margin-top: 3em;
}

/********** Q&A　ページ用の設定 **********/
#faq-header{
    padding: 0;
    width: 100%;
    height: 130px;
    background-color: var(--shigotohaku-color-main);
    margin-top: -200px;
}

#faq-header img{
    width: 80px;
    height: auto;
    margin-top: 28px;
    margin-left: 33px;
}

#faq{
    background-color: var(--shigotohaku-color-background);
    padding-bottom: 0;
}

/********** formページ用の設定 **********/
#form-header{
    padding: 0;
    width: 100%;
    height: 130px;
    background-color: var(--shigotohaku-color-main);
    margin-top: -200px;
}

#form-header img{
    width: 80px;
    height: auto;
    margin-top: 28px;
    margin-left: 33px;
}


/********** アコーディオンメニューの設定 **********/
.accordion{
    margin-left: 26%;
    width: 50%;
    font-size: var(--fs22);
}

.details {
    color: var(--shigotohaku-color-main);
    font-size: var(--fs22);
    margin-bottom: 1em;
    &:last-of-type {
    }
}
.details-summary {
    position: relative;
    display: block;
    padding: 0.8em 3em 0.8em 3.7em;
    text-indent: -2.7em;
    line-height: 1.5em;

    &:hover {
        cursor: pointer;
        opacity: 0.8;
    }
    .btn {
        position: absolute;
        top: 39%;
        left: 93%;
        width: 18px;
        height: 18px;
        transform-origin: center center;
        transition-duration: 0.2s;

        &:before,
        &:after {
            content: "";
            border-radius: 10px;
            width: 18px;
            height: 4px;
            position: absolute;
            top: 7px;
            left: 0;
            background-color: var(--shigotohaku-color-main);
            transform-origin: center center;
        }
        &:before {
            width: 4px;
            height: 18px;
            top: 0;
            left: 7px;
        }
    }
    &.is-active {
        .btn {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
            &:before {
                content: none;
            }
        }
    }
}
.details-summary::before{
    content: "Ｑ．";
    font-size: var(--fs30);
}

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

.details-content {
    p {
        padding: 0 1em 1em 3.6em;
        text-indent: -2.6em;
        text-align: left;
        line-height: 1.5em;
        &:last-of-type {
            margin: 0 0 0;
        }
    }
}
.details-summary{
    background-color: white;
}
.details-content p::before{
    content: "Ａ．";
    font-size: var(--fs30);
}

/********** back **********/
#back{
    margin: 0;
    padding: 1em 0;
    background-color: var(--shigotohaku-color-main);
}


/********** form **********/
.btnHeaderRed a{
    display: none;
}

#form_box_back{
    width: 100%;
    height: auto;
}

#form_box{
    width: 60%;
    height: auto;
    margin: 0 auto;
}
#form_box .header-2{
    margin-left: 0;
}
#form_box .form-text{
    padding-bottom: 2em;
    font-size: var(--fs22);
}

input,
select,
textarea{
    box-sizing: border-box;
    width: 100%;
    border:none;
    background-color: #eee;
    padding: 0.5em 0.2em;
    margin: 0.2em 0 0.5em 0;
}

/*　セレクトボックスの▼をカスタマイズ　*/
.select-02 {
    position: relative;
    padding-bottom: 1em;
}
.select-02:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 12px 0 12px;
    border-color: var(--shigotohaku-color-main) transparent transparent transparent;
    position: absolute;
    top: 1em;
    right: 1em;
    pointer-events: none;
}
.select-02 .wpcf7-form-control{
    appearance: none;
    line-height: 1.5em;
    padding-left: 1em;
    -webkit-appearance: none; /*Google Chrome/Safari対応*/
    -moz-appearance: none; /*Firefox対応*/
    -o-appearance: none; /*Opera対応*/
}

/*　フォーム内のカスタマイズ　*/
.heading{
    font-weight: bold;
    letter-spacing: 0.2em;
    font-size: var(--fs22);
    line-height: 3.5em;
}

.wpcf7-form-control-wrap{
    display: block;
    margin-top: -1em;
}

.wpcf7-textarea{
    margin-top: 1.5em;
}
.wpcf7-select,
.wpcf7-text,
.wpcf7-textarea,
option{
    color: var(--shigotohaku-color-main);
    font-size: var(--fs22);
}

.form-title{
    width: 60%;
    height: auto;
    margin: -16% 20% 2% 20%;
}

.form-title img{
    width: 50%;
    margin: 1em 25%;
}

.form-policy{
    border: 1px solid var(--shigotohaku-color-main);
    padding: 1em;
    line-height: 1.2em;
    font-size: var(--fs16);
}
.form-policy h2{
    text-align: center;
    margin: 0.5em;
    font-size: var(--fs22);
}

/*　同意するボタン　*/
.acceptance{
    font-size: var(--fs20);
    text-align: center;
}
.acceptance > .typesquare_tags{
    display: flex;
    flex-wrap: wrap;
    padding: 1em 0;
    margin-left: 40%;
}

.acceptance input{
    display: none;
}

.dummy{
    padding: 0 0.2em;
    font-weight: bold;
    border: 1px solid var(--shigotohaku-color-main);
    border-radius: 4px;
    color: transparent;
    background-color: transparent;
    line-height: 1em;
}
.form-textarea{
    line-height: 1em;
}

#submit .wpcf7-submit{
    width: 50%;
    margin: 0 25%;
    padding: 1em 0;
    border-radius: 2em;
    font-weight: bold;
    letter-spacing: 0.3em;
}

.checked{
    cursor: pointer;
    color: white;
    background-color: var(--shigotohaku-color-main);
}

@media screen and (max-width:960px){
    .form-title{
        width: 80%;
        margin: 0 10%;
    }
    .form-title img{
        width: 100%;
        margin-left: 0;
    }
    #form_box{
        width: 90%;
    }
    .acceptance{
        margin-bottom: 10px;
    }
    .acceptance > .typesquare_tags{
        margin-left: 30%;
    }
}

/********** サンクスページ **********/
#thanks{
    text-align: center;
}

#thanks .sns-qrcode{
    width: 40%;
    margin-left: 30%;
}

/********** タブレット系のデザイン用 **********/
@media screen and (max-width:1430px){
    .header-2 {
        margin-left: 15%;
    }
    #points ul {
        margin-left: 20%;
    }
    #points .row > .col2:nth-of-type(2) {
        width: 85%;
    }
    #timeline > .row {
        margin-left: 20%;
    }
    #exhibitor .company-list-each {
        margin-left: 20%;
    }
    .accordion {
        margin-left: 20%;
        width: 60%;
    }


    /********** スマホデザイン用 **********/

    @media screen and (max-width:960px){
        body{
            width: 100vw;
        }
        .col2{
            width: 100%;
        }
        .pc{
            display: none;
        }
        .sp{
            display: block;
        }
        #main-image{
            margin-top: -85px;
        }
        .sticky-contents{
            width: 89px;
            height: 27px;
            top: 25px;
            left: calc(93vw - 90px);
        }
        .sticky-button{
            line-height: 25px;
            font-size: 14px;
        }
        .sticky-contents-arrow{
            width: 20px;
            height: auto;
            top: 550px;
            left: 20px;
        }
        .button a{
            width: 250px;
        }

        .contents{
        }
        .header-2{
            margin-left: 10%;
        }
        #read-text .row{
            gap: 20px;
            padding-left: 0;
            padding-right: 0;
        }
        #read-text .read-text-text{
             width: fit-content;
        }
        #read-text .read-text-image{
            width: 80%;
            padding-bottom: 0;
        }
        #points h3{
            margin-left: calc(18% + 0.5em);
        }
        #points ul{
            margin-left: 18%;
        }
        #points .point-number{
            padding-top: 0;
        }
        #points .row > .col2:nth-of-type(2){
            line-height: 1.8em;
            margin-top: -5px;
            width: 70%;
        }
        #present .present-framed-box{
            padding-left: 0;
            padding-bottom: 5px;
            height: fit-content;
            width: 275px;
        }
        #present .present-framed-box.row{
            gap: 15px;
        }
        #present .present-text-title{
            margin-top: 24px;
        }
        #present .present-text-description{
            width: fit-content;
            margin: auto;
            line-height: 1.3em;
            letter-spacing: 0.72px;
        }
        #present .present-image{
            width: 197px;
            height: 170px;
        }
        #sns .x-logo,
        #sns2 .x-logo{
            text-align: center;
        }
        #sns p,
        #sns2 p{
            padding: 1em 0 1em 0;
            text-align: center;
        }
        #sns img,
        #sns2 img{
            width: 80%;
            margin: 0 10%;
        }
        #timeline h3{
            padding-bottom: 1em;
        }
        #timeline > .row{
            margin-left: 18%;
            width: 82%;
        }
        #timeline .timetable{
            width: 85%;
        }
        #timeline .time{
            width: 4.5em;
        }
        #timeline .talk-image{
            width: 1px;
        }
        #timeline .timeline-image{
            width: 90px !important;
            height: 90px !important;
            padding-bottom: 10px;
        }
        #exhibitor .company-list-each{
            margin-left: 17%;
            width: 75%;
        }
        #exhibitor ul{
            padding-left: 0;
        }
        #exhibitor .company-list-each li{
            height: fit-content;
            line-height: 1.5em;
            padding-bottom: 10px;
        }
        #exhibitor .company-list-each a{
            line-height: 1em;
        }
        #access .access-text > p.no-margin-bottom{
            margin-bottom: 1.5em;
        }
        #access h3{
            margin: auto;
            width: 80%;
            text-align: left;
        }
        #access .google-map{
            width: 80%;
        }
        .footer img{
            width: 76%;
        }
        #arrow1,
        #arrow2,
        #arrow3{
            height: 30px;
        }
        .arrow-top,
        .arrow-bottom{
            height: 15px;
        }
        .arrow-circle{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin-top: -30px;
        }
        .arrow-circle p{
            font-size: 14px;
            padding-top: 2px;
        }
        #faq-header{
            padding: 0;
            height: 67px;
            margin-top: -85px;
        }
        #faq-header img{
            width: 23px;
            margin-left: 33px;
            float: left;
            margin-top: 22px;
        }
        #form-header{
            padding: 0;
            height: 67px;
            margin-top: -85px;
        }
        #form-header img{
            width: 23px;
            margin-left: 33px;
            float: left;
            margin-top: 22px;
        }
        .accordion{
            margin-left: 10%;
            width: 80%;
        }
        .btn{
            top:35% !important;
            left: 90% !important;
        }
        #thanks{
            text-align: left;
        }
        #thanks p{
            padding-left: 1em;
        }
    }
}