@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*下の記述【width: 100vw;】によってスクロールバーが出てしまうのでそれを消す処理*/
.container {
    position: relative;
    overflow: hidden;
    z-index:1;
}

/*画面横幅いっぱいになるように設定*/
.appeal, .appeal-in, .header-container {
    position: absolute;
    top: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

/*画面縦幅いっぱいになるように設定*/
.appeal, .appeal-in {
    height: 100vh;
    background-size: cover;
}

.content {
    margin-top: 100vh;
}

.header-container {
    z-index: 3;
}

.appeal {
    z-index: 2;
}

.header-container, .navi {
    background-color: transparent;
}

#header-container #navi a {
    color: #ffffff;
}

.site-name-text {
display: none;
}

@media screen and (max-width: 1023px){
    .appeal {
        height: 100vh;
/*
        background-image: url("https://rokuro-tototo.jp/wp-content/uploads/2023/04/S__14852115_4.png");
*/
    }
}

@media screen and (max-width: 1023px){
    .mobile-header-menu-buttons {
        background-color: transparent;
    }
}

@media screen and (max-width: 1023px){
    .mobile-header-menu-buttons {
        box-shadow:none;
    }
}

@media screen and (max-width: 1023px){
    .mblt-header-mobile-buttons {
        margin-top: 0;
    }
}

@media screen and (max-width: 1023px){
    .search-menu-button.menu-button,
    .navi-menu-button.menu-button{
		background-color: transparent;
        color: #181d62;
    }

    .logo-menu-button.menu-button {
        background: url("画像URL") no-repeat;
        background-size: auto 44px;/*大きさ*/
        background-position: center;
        top: 0;/*上からの位置*/
    }
}

.entry-title {
display: none;
}

/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #6f82ac;
	transform: translateX(101%);
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(98,98,99,0.8);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}

.gmap iframe,
.gmap object,
.gmap embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all  0.7s ease;
}

.gmap iframe:hover,
.gmap object:hover,
.gmap embed:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

.tate{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;    /* 文章を縦書きにする */
	}

.change-area {
  background-image:url("https://rokuro-tototo.jp/wp-content/uploads/2023/04/4924202_m-1-rotated.jpg"); 
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.change-area2 {
  background-image:url("https://rokuro-tototo.jp/wp-content/uploads/2023/06/DSC08640-scaled.jpg"); 
  margin: 30px calc(50% - 50vw);
  width: 100vw;
}

@media screen and (max-width: 1023px){
    .change-area2 {
		 margin: -30px calc(50% - 50vw);
        background-position-x: 30%;
		background-position-y: 30%;
    }
}

/* PLUST */
body:not(.home) .content{
margin-top: 24px;
}
.navi-in > ul li{
/*
    width: calc(100% / 8);
*/
    width: auto;
    display: inline-block;
    margin: 0 1rem;
    padding: 0 0.5rem;
}
.navi-in > ul li.sp_only{
    display: none;
}
.navi-in > ul li a{
    font-size: 0.8rem;
}
.navi-in > ul li a:hover{
    background: none;
    color: #fff;
}
body:not(.home) #header-container #navi .navi-in > ul li a{
    color: var(--cocoon-text-color);
}
.appeal-content{
    background: none;
    padding: 10rem;
}
.appeal-content .pr_arrow{
    position: absolute;
    bottom: 15vh;
    left: calc(50% - 2em);
}
.appeal-content .pr_arrow div{
    color: #fff;
    font-size: 1.2rem;
}
.appeal-content .pr_arrow div.c-scrolldown{
    width: 1px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
}
.appeal-content .pr_arrow div.c-scrolldown .c-line{
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%);
    background-position: 0 -60px;
    background-size: 100% 200%;
    animation: scrolldown 3s cubic-bezier(0, 0, 0, 0) forwards infinite;
}
.base01.cf , .base02.cf{
    position: relative;
    max-width: 1480px;
    margin: auto;
}
.base01.cf .child1 , .base02.cf .child3{
    position: absolute;
    top: -3em;
}
.base01.cf .child1{
    left: 800px;
}
.base01.cf .child2{
    position: absolute;
    top: auto;
    bottom: 20%;
    left: auto;
    right: 5%;
}
.base01.cf .child2 a{
    display: block;
    padding: 0 0 0 180px;
    color: #000;
    margin: 5px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.base01.cf .child2 a:before{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: 0;
    width: 100px;
    height: 5px;
    border: none;
    border-right: 2px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(45deg);
    transition: .9s;
}
.base01.cf .child2 a:hover::before{
    width: 150px;
}
.base02.cf .child3{
    left: auto;
    right: 850px;
    letter-spacing: 0.65em;
}
.base02.cf .child4{
    position: absolute;
    top: auto;
    bottom: 20%;
    left: 5%;
}
.base02.cf .child4 a{
    display: block;
    padding: 0 0 0 180px;
    color: #000;
    margin: 5px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.base02.cf .child4 a:before{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: 0;
    width: 100px;
    height: 5px;
    border: none;
    border-right: 2px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(45deg);
    transition: .9s;
}
.base02.cf .child4 a:hover::before{
    width: 150px;
}
.w_color{
    color: #fff;
}
#content-bottom-in .widget_custom_html a{
    display: block;
    width: 50px;
    margin: -3rem auto 0;
    position: relative;
    z-index: 1;
}
body:not(.home) .wp-block-cover .wp-block-cover__inner-container, body:not(.home) .wp-block-cover-image .wp-block-cover__inner-container{
    background: none;
}
@media screen and (max-width: 1023px){
.navi-menu-content{
    transform: translateY(-100%);
    max-width: 100%;
    text-align: center;
    background: rgb(0 0 0 / 50%);
    padding-top: 5rem;
}
.mblt-header-and-footer-mobile-buttons {
	margin-top: 0;
}
.mobile-header-menu-buttons label.menu-button-in{
    position: fixed;
    top: 1rem;
    right: 1rem;
    color: #000;
    display: flex;
    height: 2rem;
    width: 2rem;
    justify-content: center;
    align-items: center;
}
.mobile-header-menu-buttons label.menu-button-in .fa , .mobile-header-menu-buttons label.menu-button-in .fa:before , .mobile-header-menu-buttons label.menu-button-in .fa:after{
    content: '';
    display: block;
    height: 1px;
    width: 2rem;
    background-color: #000;
    position: absolute;
}
.mobile-header-menu-buttons label.menu-button-in .fa:before{
    bottom: 10px;
}
.mobile-header-menu-buttons label.menu-button-in .fa:after{
    top: 10px;
}
.mobile-header-menu-buttons label.menu-button-in.white_line .fa , .mobile-header-menu-buttons label.menu-button-in.white_line .fa:before , .mobile-header-menu-buttons label.menu-button-in.white_line .fa:after{
    background-color: #fff;
}
.mobile-header-menu-buttons label.menu-button-in .fa-navicon:before, .fa-reorder:before, .fa-bars:before{
    font-size: 2rem;
}
.mobile-header-menu-buttons label.menu-close-button{
    position: fixed;
    top: 1rem;
    right: 1rem;
    color: #fff;
    display: flex;
    height: 2rem;
    width: 2rem;
    justify-content: center;
    align-items: center;
}
.mobile-header-menu-buttons label.menu-close-button .fa:before , .mobile-header-menu-buttons label.menu-close-button .fa:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 30px;
	background: #fff;
}
.mobile-header-menu-buttons label.menu-close-button .fa:before{
  transform: translate(-50%,-50%) rotate(45deg);
}
.mobile-header-menu-buttons label.menu-close-button .fa:after{
 transform: translate(-50%,-50%) rotate(-45deg);
}
.mobile-header-menu-buttons .mobile-footer-menu-buttons{
    box-shadow: none;
}
.mobile-header-menu-buttons .menu-caption{
    display: none;
}
.mobile-footer-menu-buttons .menu-button{
    background: #000;
    padding-top: 0;
}
.mobile-footer-menu-buttons .menu-icon{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 1rem;
    padding-right: 2em;
}
.mobile-footer-menu-buttons .menu-icon:after{
    content: '';
    width: 70px;
    height: 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #fff;
    transform: skew(45deg);
}
.mobile-footer-menu-buttons .menu-icon .fa{
    display: none;
}
.mobile-footer-menu-buttons .menu-caption{
    font-size: 0.9rem;
    line-height: 45px;
    color: #fff;
}
.menu-drawer > li.icon_instagram{
    position: absolute;
    bottom: 20%;
    width: calc(100% - 2em);
 }
.menu-drawer > li.icon_instagram a{
    display: inline-block;
    width: 40px;
    padding: 0;
 }
.menu-drawer > li.icon_instagram a img{
    filter: invert(1);
}
.appeal{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
.appeal video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
.appeal-content{
    padding: 5rem;
    margin-top: 10vh;
}
.appeal-content .pr_arrow{
    bottom: auto;
    top: 60vh;
}
/*
.appeal-content .pr_arrow div.c-scrolldown{
    height: 80px;
}
.appeal-content .pr_arrow div.c-scrolldown .c-line{
    height: 130%;
}
*/
.base01.cf .child1 , .base02.cf .child3{
    position: absolute;
    top: -3em;
    margin-bottom: 0;
    font-size: 30px;
}
.base01.cf .child1{
    left: auto;
    right: 5%;
}
.base01.cf .child2{
    bottom: auto;
    top: 50vw;
    left: 0;
    right: 10%;
}
.base02.cf .child3{
    right: auto;
    left: 5%;
}
.base02.cf .child4{
    bottom: auto;
    top: 50vw;
    left: 10%;
    right: 0;
}
.change-area .wp-block-image.aligncenter{
    padding: 0 1.5rem;
}
#content-bottom-in .widget_custom_html a{
    margin: -2rem auto -1rem;
}
body:not(.home) .wp-block-cover, body:not(.home) .wp-block-cover-image{
    min-height: auto;
    padding: 0;
}
body:not(.home) .wp-block-cover img, body:not(.home) .wp-block-cover-image img{
    position: relative;
}
body:not(.home) .wp-block-cover .wp-block-cover__inner-container, body:not(.home) .wp-block-cover-image .wp-block-cover__inner-container{
    position: absolute;
}
}

@keyframes scrolldown {
  0% {
    background-position: 0 -100px;
  }
  75% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

.new-entry-cards .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: right;
}
.new-entry-card-update-date {
	display: none;
}