@charset "UTF-8";
/* CSS Document */



/*
landing　トップページ用*/

.all-width .box-sub-black {
    width: 45%;
    min-width: 300px;
    background-color: black;
    padding: 50px;
    color: aliceblue;
    /* [disabled]margin-top: 115px; */
   
   
}


.relaxed-box .box-sub-black {
    width: 50%;
    min-width: 300px;
    background-color: hsla(0,0%,0%,0.44);
    padding: 30px;
    color: aliceblue;
    margin-top: 152px;
    position: absolute;
    right: 0px;
    top: 20px;
    z-index: 1;
    font-size: 18px;
}



.youtube-view {
    position: relative;
    z-index: -1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 100vh;
    margin: 0 auto;
    max-width: 2000px;
}




.embed-container {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed; /* fixed の場合。absolute でも同じ */
  right: 0;
  top: 0;
    
}

.embed-container iframe {
  box-sizing: border-box;
  
  left: 50%;
  min-height: 120vh;
  min-width: 1600vh;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh; /* 16:9 の幅なので 177.77% (= 16 ÷ 9) */
}




/*
---------------------------*/



.adobe-font-ff-cocon-pro {
        font-family: ff-cocon-pro, sans-serif;
        font-weight: 400;
        font-style: normal;
}
.AB_ootori-Regular {
        font-family: ab-ootori, sans-serif;
        font-weight: 400;
        font-style: normal;
}
.Heisei-Mincho-Std-W7 {
        font-family: heisei-mincho-std, serif;
        font-weight: 700;
        font-style: normal;
}
.Heisei-Mincho-Std-W3 {
        font-family: heisei-mincho-std, serif;
        font-weight: 300;
        font-style: normal;
}
h2.Heisei-Mincho-Std-W7 {
        font-size: 60px;
}
h1 {
        position: relative;
        display: inline-block;
        padding-top: 0;
        /* [disabled]padding-right: 55px; */
        /* [disabled]padding-left: 55px; */
        padding-bottom: 0;
}








body {
	background:none;
    
}







h1.logo {
        margin: 0 0;
}

a:hover {
        opacity: 0.7;
}

html { 
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

html {
    box-sizing: border-box;
    bottom: auto;
    margin-top: 0px;
    background-color: #FFFFFF;
}

.container {
    /* [disabled]background-color: #FFFFFF; */
}


/*
サイドバーの幅など*/
#secondary {
        max-width: 400px;
        width: 30%;
        background-color: #FFFFFF;
        padding-left: 11px;
        padding-right: 11px;
        padding-top: 10px;
        padding-bottom: 10px;
}
#secondary li {
        margin-left: -30px;
}

/*サイト検索*/
.wp-block-search__button {
        width: 80px;
}
.widget.widget_block.widget_search {
        padding: 10px;
}

.widget-area h2 {
        padding-left: 109px;
        margin-left: -218px;
        margin-top: 150px;
        display: none;
}



#masthead {
        margin: 0;
}


/*横並び制御*/

.flexbox {
        display: flex;
}
.flexbox-wrap {
        display: flex;
        flex-wrap: wrap;
}

/*ニュース一覧*/
.all-title {
        margin-bottom: 3px;
}
.day {
        display: block;
        /* [disabled]height: 10px; */
        padding: 0px 10px;
}
.cat {
        display: block;
        /* [disabled]height: 10px; */
        background-color: rgba(161, 163, 146, 1.00);
        padding: 2px 10px;
        color: rgba(243, 243, 243, 1.00);
        border-radius: 10px;
        font-weight: bold;
        font-size: x-small;
        line-height: 20px;
        margin-bottom: 13px;
}





/*サイトのロゴや説明*/

/*ロゴ画像*/
img.custom-logo {
    width: 315px;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 0px;
    margin-left: 1px;
    margin-top: 0px;
}

.site-branding {
        background-color: rgba(3, 38, 33, 0.80);
        /* [disabled]background-image: url(site-img/moku.png); */
        width: 100%;
}
header#masthead {
        /* [disabled]height: 100vh; */
        margin: 0;
}
.site-info {
    width: 100%;
    margin: 0 auto -23px;
    background-color: black;
    color: aliceblue;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 47px;
}



.clear {
        clear: both;
}

footer {
        width: 100%;
}



/*ナビ固定*/
.fixed {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
}
/* トップへ戻るボタン */
/* 上に戻るボタン */
.pagetop {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
        text-decoration: none;
        display: none;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        width: 3.3rem;
        height: 3.3rem;
        line-height: 3.3rem;
        border-radius: 3.3rem;
        text-align: center;
        cursor: pointer;
        z-index: 10000;
}nav
.pagetop:hover {
        color: #fff !important;
        background-color: #ed702b;
        text-decoration: none;
}




/*---------------*/
/*==================================================
スライダーのためのcss
===================================*/
.slider {
        position: relative;
        z-index: -1;
        /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
        height: 100vh;
        margin: 0 auto;
        max-width: 2000px;
}
/* 背景画像設定 */
.slider2 {
    position: relative;
    z-index: -1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 110px;
    ; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    overflow: hidden;
    /* [disabled]margin-bottom: -715px; */
    padding-bottom: 0px;
    margin-top: -110px;
}
/* 背景画像設定 */
.slider-item01 {
        background: url(img/1.jpg);
        padding-bottom: 0px;
}
.slider-item02 {
        background: url(img/2.jpg);
}
.slider-item03 {
        background: url(img/3.jpg);
}
.slider-item {
        width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        height: 100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
        background-repeat: no-repeat; /*背景画像をリピートしない*/
        background-position: center; /*背景画像の位置を中央に*/
        background-size: cover; /*背景画像が.slider-item全体を覆い表示*/
}
.top-box {
        height: 100vh;
        width: 50%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.30);
        z-index: 4;
        position: absolute;
}
.top-box-text h2{
       
        
        color: #FFFFFF;
        font-size: 50px;
     text-align:center;
}
.top-box-text {
    margin-top: 38vh;
    color: #FFFFFF;
    font-size: 20px;
    text-align:center;
    padding-left: 28px;
    padding-right: 20px;
}
/*矢印の設定*/
.slick-prev, .slick-next {
        position: absolute;
        z-index: 3;
        top: 42%;
        cursor: pointer; /*マウスカーソルを指マークに*/
        outline: none; /*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #fff; /*矢印の色*/
        border-right: 2px solid #fff; /*矢印の色*/
        height: 25px;
        width: 25px;
}
.slick-prev { /*戻る矢印の位置と形状*/
        left: 2.5%;
        transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
        right: 2.5%;
        transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
        position: relative;
        z-index: 3;
        text-align: center;
        margin: -94px 0 0; /*ドットの位置*/
}
.slick-dots li {
        display: inline-block;
        margin: 0 5px;
}
.slick-dots button {
        color: transparent;
        outline: none;
        width: 8px; /*ドットボタンのサイズ*/
        height: 8px; /*ドットボタンのサイズ*/
        display: block;
        border-radius: 50%;
        background: #fff; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
        background: #ffffff; /*ドットボタンの現在地表示の色*/
}


/*位置指定*/

/*右下position*/
.bottom-right-position {
        position: absolute;
        right: 0px;
        bottom: 0px;
}
/*右上position*/
.top-right-position {
        position: absolute;
        right: 0px;
        top: 32px;
        font-weight: bolder;
}
.relative {
        position:relative;
}
.absolute{
    
    position: absolute;
}


/*アニメーションCSS*/


/*拡大*/
.slide-animation {
        animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
        0% {
                transform: scale(1);
        }
        100% {
                transform: scale(1.05);
        }
}
/*アニメーション要素 横から出現*/
.anim-box.slidein.is-animated {
        animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
        0% {
                transform: translateX(180px);
                opacity: 0;
        }
        100% {
                transform: translateX(0);
        }
        40%, 100% {
                opacity: 1;
        }
}
/*アニメーション要素 フェードアップ*/
.anim-box.fadeup.is-animated {
        animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeup {
        0% {
                transform: translateY(30px);
                opacity: 0;
        }
        80% {
                opacity: 1;
        }
        100% {
                opacity: 1;
                transform: translateY(0);
        }
}

/*囲み枠 シンプル黒枠 一覧用*/
.box-black {
        font-weight: bold;
        border: 1px solid #DFDFDF;
        /* [disabled]top: 22px; */
        bottom: 0px;
        width: 23%;
        margin-bottom: 32px;
        margin-right: 2%;
    min-width: 200px
}
.icatch {
        width: 100%;
        height: 200px;
        background: #000;
        overflow: hidden;
}
.icatch img {
       
        height: 200px;
        object-fit: cover;
}
.box-black h2 {
        margin-top: 0px;
        margin-left: 9px;
        font-size: 19px;
}
.box-black p {
        margin: 0;
        padding: 8px;
}



/*配置枠*/
.all-width {
        width: 100%;
}

.topmamargin150 {
        padding-top: 150px;
}


.bottommamargin150 {
        padding-bottom: 150px;
}
.relaxed-box {
        width: 100%;
        padding: 50px 20px;
        max-width: 1000px;
  
        margin: 0 auto;
}

.all-width h1 {
        /* [disabled]background-color: #828282; */
        text-align: center;
        color: #000000;
        width: 100%;
        /* [disabled]margin-bottom: -42px; */
        padding-bottom: 10px;
}


/*見出しに横線*/

.head-border {
    display: flex;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
}
 
.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}
 
.head-border:before {
    margin-right: 1rem;
}
 
.head-border:after {
    margin-left: 1rem;
}


.all-width .box-black h2 {
        border-bottom: none;
}


/*背景色*/
.white {
        background-color: #ffffff;
}
.grey {
        background-color: #E9E9E9;
}




/*文字ニュース*/
.relaxed-box.news-set ul {
        list-style-type: none !important;
        margin: 0 auto;
        max-width: 800px;
        padding-left: 0px;
}
.relaxed-box.news-set li {
        padding: 8px 0;
        border-top: 1px solid #444;
}
.relaxed-box.news-set li:first-child {
        border: none;
}


.text-relaxed-box {
        margin-top: 80px;
        /* [disabled]margin-right: 35px; */
        /* [disabled]margin-left: 35px; */
        margin-bottom: 79px;
        padding: 0px;
}


.box-main {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 46px;
        padding-top: 76px;
    max-width: 1100px;
}
.box-main img {
  
   
}
/*シングルページの画像サイズ制御*/
.post-thumbnail 
{
     margin: 0 auto;
        width: 80%;
        height: auto;
        padding-top: 0px;
    display: block;
   
}


.box-sub {
        width: 45%;
        min-width: 300px;
            
}


.box-sub img {
        width: 80%;
        height: auto;
        padding-top: 29px;
     z-index: 10;
    

}





/*コンタクトフォームへのリンクボタン　QOLP追加*/
.botton-contact {
        float: right;
        margin-top: -44px;
}
.button13 a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 13px auto 0;
        padding: 0.5em 2em 0.5em 1.5em;
        width: 120px;
        color: #333;
        font-size: 15px;
        font-weight: 700;
        background-color: #F2F2F2;
        box-shadow: 5px 5px 0 #3d9ec8;
        transition: 0.3s;
}
.button13 a:hover {
        text-decoration: none;
        background-color: #5573DEd3;
        box-shadow: 0 0 0;
}


@media screen and (min-width: 768px) {
        
}

/*QOLP追加要素NAV*/

.main-navigation a {
        color: #000000;
}
.main-navigation a:visited {
        color: #000000;
}
.main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active {
        color: #FF8000;
}
.main-navigation a:focus {
        outline: thin dotted;
}
.main-navigation a:hover, .main-navigation a:active {
        outline: 0;
}


/* Links
--------------------------------------------- */
a {
        color: #6E6848;
}
a:visited {
        color: #6E6848;
}
a:hover, a:focus, a:active {
        color: #6E6848;
}
a:focus {
        outline: thin dotted;
}
a:hover, a:active {
        outline: 0;
}




.main-navigation .current-menu-item a:visited  {
 color: #018B78;}


/*元のNAV　underscoresから修正*/

.main-navigation {
        display: block;
        width: 100%;
        /*QOLP追加要素*/
        min-width: 1000px;
        font-size: 15px;
        font-weight: bold;
        background-color: hsla(208, 100%, 97%, 0.90);
        padding: 19px;
        text-align: right;
    min-height: 60px;
}
.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 285px;
}
.main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
}
.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
        display: block;
        left: auto;
}
.main-navigation ul ul a {
        width: 200px;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
        left: auto;
}
.main-navigation li {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}
.main-navigation a {
        display: block;
        text-decoration: none;
}




/* QOLP追加ハンバーガーメニュー*/
.menu-toggle {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 40px;
        width: 40px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #FFFFFF;
}
.menu-toggle span, .menu-toggle span:before, .menu-toggle span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #000000;
        position: absolute;
}
.menu-toggle span:before {
        bottom: 8px;
}
.menu-toggle span:after {
        top: 8px;
}
/* QOLP追加ハンバーガーメニュー
開いた時にXマークに変える説明
https://www.asobou.co.jp/blog/web/css-menu

*/
/*QOLP追加要素*/
.main-navigation li + li {
        border-left: 1px solid #333;
}


@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}



/*========================================*/
@media screen and (max-width:37.5em) {
        /* QOLP追加要素 画面サイズが37.5em以下はここを読み込む */
        /*QOLP追加要素*/
        /*QOLP追加要素*メニューの縦線消し*/
        .main-navigation li + li {
                border-left: 0px solid #333;
        }
        /*QOLP追加要素*メニューの行間設定*/
        .main-navigation li {
                padding-top: 10px;
        }
        /*QOLP追加要素メニュー背景を不透明に*/
        .main-navigation {
                background-color: rgba(255, 255, 255, 1.00);
        }
        /*QOLP追加要素メニューの幅を狭く*/
        .main-navigation {
                min-width: 200px;
                widows: 100%;
                position: relative;
        }
        /*ロゴ画像*/
        img.custom-logo {
                margin-left: 10px;
            width: 70%;
        }
        .top-box {
                height: 100vh;
                width: 100%;
                margin: 0 auto;
                background-color: rgba(0, 0, 0, 0.30);
                z-index: 4;
                position: absolute;
        }
        .botton-contact {
                display: none;
        }
        /*メニューの位置をリセット*/
        .main-navigation ul {
                padding-left: 0px;
                padding-top: 37px;
        }
        .main-navigation {
                text-align: left;
        }
        .main-navigation li {
                padding-left: 0px;
                padding-right: 0px;
        }
        /*  サイドバーの制御*/
        #secondary {
                display: none;
        }
    
    
        /*囲み枠 シンプル黒枠 一覧用*/
        .box-black {
                width: 100%;
                margin: 0 auto;
                margin-bottom: 30px;
                display: inline-block;
            
        }
        .icatch {
                width: 100%;
                height: 200px;
                background: #000;
                overflow: hidden;
                background-color: antiquewhite;
        }
        .icatch img {
                width: 100%;
                height: 200px;
                object-fit: cover;
        }
        /*ボックスのスマホでの折り返しを削除*/
        .flexbox-wrap {
                display: block;
        }
    
    .relaxed-box {
    width: 100%;

    padding-bottom: 50px;

           margin: 0 auto;
        
}
    
    .box-main {
        width: 100%;
        margin: 0 auto;
       
}
    
}