@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
*/

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

.topslider {
    margin-top: 2em;
    margin-bottom: 2em;
}

.readmore {
    position: relative;
    margin: 3em auto;
    display: block;
    color: #666;
    border: none;
    outline: 0;
    cursor: pointer;
    background: none;
    letter-spacing: 0.1em;
}
.readmore:before {
}
.readmore.on-click:before {
  transform: rotate(180deg);
}
.readmore .open {
  	display: block;
	padding: 9px;
    border: solid 1px;
	width: 7em;
}
.readmore.on-click .open {
  display: none;
}
.readmore .close {
  display: none;
	padding: 9px;
    border: solid 1px;
	width: 7em;
}
.readmore.on-click .close {
  display: block;
}
.tagline {font-size: 1.5em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.video-container, .instagram-container, .facebook-container {
    max-width: 800px;
    margin: 30px 0;
}

.next-furatto-thumbnails .next-furatto-thumbnail {
    width: 100%;
    height: auto; /* アスペクト比を維持するために自動調整 */
}


/**SNSボタン**/
.btn_sns-f a{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;
	margin: auto;
	padding: 1rem 1rem;
	font-weight: bold;
	border-radius: 4px;
	border: 1px solid #f7cc00;
	color: #333;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
	transition: all 0.2s ease-in;
}
.btn_sns-f a:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.btn_sns-f a:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #f7cc00;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.btn_sns-f a:hover {
 color: #ffffff;
 border: 1px solid #f7cc00;
}

.btn_sns-f a:hover:before {
 top: -35%;
 background-color: #f7cc00;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.btn_sns-f a:hover:after {
 top: -45%;
 background-color: #f7cc00;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.btn_sns-f .fa-external-link:before {
    content: "";
}

/**新着**/
.info-list.is-style-frame-border {
    border-bottom: 1px solid;
	border-left: none;
	border-right: none;
	border-top: none;
    margin-bottom: 5em;
}
.info-list {
    padding: 20px 0;
}
.info-list-item {
    padding: 30px 0;
    font-size: 1em;
    line-height: 1.6;
}
#info-list .info-list-item:first-child {
    padding-top: 0;
}
.info-list-item-meta {
    font-size: 0.875em;
    opacity: 1;
}

/**見出し**/
.article h2 {
	color: #323232;
	background-color: #ffffff;
	font-size: 26px;
    padding: 5em 0;
}
.article h2 {
  font-weight: 900;
  border-bottom: 1px solid #000;
  padding: 0.3em;
  margin-bottom: 1.5em;
  position: relative;
}
.article h2::after {
	content: '';
    background-color: #f7cc00;
    width: 5em;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
}

/*Youtube*/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/*サイドバー*/
.side-bana {
	margin: 10px 0;
}
.side-bana:after {
	pointer-events: none;}
.side-bana a:hover {
	opacity: 0.7;
}

.h1center {
	margin-top: 1em;
	text-align: center;
}


.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}

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

/*834px以下*/
@media screen and (max-width: 834px){
	.side-bana{width: 45%; margin: 2.5% 0;float: left;}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.navi-footer-in > .menu-footer li.menu-item {width: 80%;}
	.side-bana{width: 100%;text-align: center; margin: 0;}
}