@charset "utf-8";
/*==================================================
    基本設定
==================================================*/

/*--------------------------------------------------
    文字
--------------------------------------------------*/
html{
    --2px: 0.125rem;
    --10px: 0.625rem;
    --11px: 0.6875rem;
    --12px: 0.75rem;
    --13px: 0.8125rem;
    --14px: 0.875rem;
    --15px: 0.9375rem;
    --16px: 1rem;
    --17px: 1.0625rem;
    --18px: 1.125rem;
    --19px: 1.1875rem;
    --20px: 1.25rem;
    --21px: 1.3125rem;
    --22px: 1.375rem;
    --23px: 1.4375rem;
    --24px: 1.5rem;
    --25px: 1.5625rem;
    --26px: 1.625rem;
    --27px: 1.6875rem;
    --28px: 1.75rem;
    --29px: 1.8125rem;
    --30px: 1.875rem;
    --40px: 2.5rem;
    --50px: 3.125rem;
    --60px: 3.75rem;
}

/*--------------------------------------------------
    body
--------------------------------------------------*/
body{
    font-size: var(--16px);
    color: #756111;
}

/*--------------------------------------------------
    画面幅
--------------------------------------------------*/
#header__inner{
    max-width: 1280px;
    width: 100%;
    margin: 0px auto;
    padding: 10px 20px;
}

/*--- max個別画面設定 ---*/
.max_600{
    max-width: 600px;
    width: 100%;
    margin: 0px auto;
}

/*--------------------------------------------------
    画像
--------------------------------------------------*/
img{
    width: 100%;
    vertical-align: middle;
}

/*--------------------------------------------------
    段落
--------------------------------------------------*/
p{
    line-height: 1.7;
    padding-bottom: 20px;
}
p:last-of-type{
    padding-bottom: 0px;
}
/*==================================================
    header 設定
==================================================*/
#header{
    border-bottom: solid 2px #756111;
}
.header_title{
    text-align: center;
    margin-bottom: 30px;
}
.header_title .site_title a{
    display: block;
    text-decoration: none;
    font-size: var(--26px);
    font-weight: bold;
    color: #756111;
}

/*sub_title*/
.header_title .sub_title{
    font-size: var(--14px);
}

/*--------------------------------------------------
    header_menu
--------------------------------------------------*/
.header_menu{
    padding-bottom: 20px;
}
.header_menu ul{
    display: flex;
    align-items: center;
    list-style: none;
}
.header_menu ul li{
    width: calc(100% / 5);
    text-align: center;
}
.header_menu ul li + li{
    border-left: solid 1px #756111;
}
.header_menu ul li a{
    display: block;
    color: #8A805F;
    text-decoration: none;
}
.header_menu ul li a span{
    display: block;
    font-size: var(--12px);
}
.header_menu ul li a:hover{
    font-weight: bold;
}
/*==================================================
    main 共通 設定
==================================================*/

/*--------------------------------------------------
    section
--------------------------------------------------*/
section{
    margin-bottom: 100px;
}
section:first-of-type{
    margin-top: 100px;
}

/*--------------------------------------------------
    slider
--------------------------------------------------*/
/*--------------------------------------------------
    slider
    画像スライダー
    表示時間 4秒
    移動時間 0.5秒
    画像枚数 3枚
--------------------------------------------------*/
.slider{
    position: relative;
}
.slider__inner{
    display: flex;
    justify-content: center;
}
.slider__inner img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s;
    z-index: 0;
}
.slider input{
    display: none;
}
.slider__inner label span{
    display: block;
    width: 30px;
    height: 30px;
    padding: 7px;
    margin: 0px 0 0;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.slider__inner label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #4287f5;
    opacity: 0.5;
    border-radius: 100%;
}
.slider input:nth-of-type(1):checked ~ .slider__inner label:nth-of-type(1) span::before,
.slider input:nth-of-type(2):checked ~ .slider__inner label:nth-of-type(2) span::before,
.slider input:nth-of-type(3):checked ~ .slider__inner label:nth-of-type(3) span::before{
    background: #000;
    opacity: 1;
}
.slider__inner label span::before{
    /*(１枚の表示させたい時間 + 切り替え時間) * 画像の枚数 */
    animation: slidebutton 13.5s infinite;
}
@keyframes slidebutton{
    0%{opacity: 0.5;background: #4287f5;}
    3.7%{opacity: 1;background: #000;} /* 切り替え時間 ÷ animationの時間 * 100 = A */
    33.3%{opacity: 1;background: #000;} /* 100 ÷ 画像の枚数 = B */
    37%{opacity: 0.5;background: #4287f5;} /* A + B */
}
.slider__inner label:nth-of-type(2) span::before,.slider__inner label:nth-of-type(2) img{
    /*(表示させたい時間 + 切り替え時間) * (画像の順 - 1)*/
    animation-delay: 4.5s;
}
.slider__inner label:nth-of-type(3) span::before,.slider__inner label:nth-of-type(3) img{
    animation-delay: 9s;
}
.slider input:nth-of-type(1):checked ~ .slider__inner label:nth-of-type(1) img,
.slider input:nth-of-type(2):checked ~ .slider__inner label:nth-of-type(2) img,
.slider input:nth-of-type(3):checked ~ .slider__inner label:nth-of-type(3) img{
    opacity: 1;
    z-index: 1;
}
.slider__inner img{
    /*(１枚の表示させたい時間 + 切り替え時間) * 画像の枚数 */
    animation: slide 13.5s infinite;
    opacity: 0;
}
@keyframes slide{
    0%{opacity: 0;}
    3.7%{opacity: 1;z-index: 1;}/* b÷x×100=y */
    33.3%{opacity: 1;}/* 100÷c=z */
    37%{opacity: 0;z-index: 0;}/* y+z */
}
.slider input:checked ~ .slider__inner img,.slider input:checked ~ .slider__inner span::before{
    animation: none;
}
.slider__inner:hover img,.slider__inner:hover span::before{
    animation-play-state:paused;/* マウスを載せると一時停止 */
}

/*--------------------------------------------------
    article .page
--------------------------------------------------*/
.page{
    padding: 0px 40px;
}

/*--------------------------------------------------
    heading
--------------------------------------------------*/

.page_top .heading{
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 10px;
}
.page_top .heading h2{
    font-size: var(--22px);
    font-weight: bold;
}

/*==================================================
    information
==================================================*/
.information ul{
    border: solid 2px #756111;
    list-style: none;
    padding: 20px 30px;
}
.information ul li{
    padding: 10px;
    border-bottom: dashed 1px #756111;
}
.information ul li span.time{
    display: inline-block;
    margin-right: 10px;
    font-size: var(--14px);
}
.information ul li a{
    display: inline-block;
    color: #756111;
    text-decoration: none;
}
.information ul li a:hover{
    font-weight: bold;
}
.page_link_btn{
    display: block;
    max-width: 600px;
    width: 100%;
    margin: 20px auto 0;
    text-align: right;
    color: #756111;
    text-decoration: none;
}
.page_link_btn::before{
    content: "→";
    padding-right: 5px;
}
    
/*==================================================
    private_session
==================================================*/
.private_session .contents ul{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
}
.private_session .contents ul li{
    width: calc((100% - 80px) / 3);
    text-align: center;
}
.private_session .contents ul li a{
    display: block;
    background-color: rgb(117, 97, 17);
    color: rgb(255, 255, 255);
    transition: 0.5s;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(117, 97, 17);
    border-image: initial;
    text-decoration: none;
    padding: 15px 10px;
}
.session_others{
    max-width: 600px;
    width: 100%;
    margin: 60px auto;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(117, 97, 17);
    border-image: initial;
    padding: 40px;
}

.contact_link_btn{
    display: block;
    width: 70%;
    background-color: rgb(117, 97, 17);
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none;
    margin: 30px auto 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(117, 97, 17);
    border-image: initial;
    padding: 10px;
    transition: 0.5s;
}

/*==================================================
    item
==================================================*/

/*--- item_warp ---*/
.item .item_warp{
    display: flex;
    gap: 20px;
    list-style: none;
}
.item .item_box{
    width: calc((100% - 60px) / 4);
}
.item .item_box a{
    display: block;
    text-decoration: none;
    color: #756111;
}
.item .item_box .image_title{
    text-align: center;
}
/*==================================================
    footer 設定
==================================================*/
#footer{
    padding: 20px 0px;
}

/*--------------------------------------------------
    copyright
--------------------------------------------------*/
.copyright{
    text-align: center;
}