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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body{overflow-x: hidden;}
/*
div.vid_contents {width: 100%;text-align: center;margin: auto;padding: 0;background: #F8EDE3;background-attachment:fixed;}
video.vid_main {width: 100%;max-width: 4000px;}
*/
/* hero */
.hero {
background: url(https://totonoegoto.com/wp-content/uploads/2025/05/hero001.jpg) center / cover;
margin: 0 calc(50% - 50vw);
width: 100vw;
height: 100vh;	/*画像の高さを調整*/
}
/* 全体色 */
/* #content, #footer, .container, .main, .menu-content {background-color:#F8EDE3;color:#7D6E83;} */
#content, #footer, .container, .main, .menu-content {background-color:#fff;color:#7D6E83;}
.page-id-5 #content, .page-id-5 .main {padding:0;margin:0 auto;}
/* title 
.mobile-menu-buttons .menu-button > a{font-weight:500;}
*/
/* モバイルヘッダーボタン 
.mobile-menu-buttons .menu-button {width:100px;}
.mobile-header-menu-buttons {display: flex;bottom: auto;top: 0;}
.header-container-in.hlt-top-menu,#navi-in{display:none;}
.mobile-header-menu-buttons {box-shadow: 0 0 0px white;background-color:#fff;}
*/
/* 文字色 */
.navi-footer-in a, .site-name-text-link, .blogcard, .menu-drawer a {color:#7D6E83;}
/*ヘッダーのタイトルを非表示*/
#header-in > div.logo.logo-header.logo-image{display:none;}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{display: none;}
/*ハンバーガーメニューの文字を消す
span.navi-menu-caption.menu-caption {display: none;}
span.navi-menu-icon {font-size: 1.6em;}
span.search-menu-icon.menu-icon {font-size: 1.2em;padding-top: 8px;}
.logo-menu-button {font-size: 1.4em;letter-spacing:8px;}
*/
/*検索の文字を消す
span.search-menu-caption.menu-caption {display: none;}
span.search-menu-icon {font-size: 1.2em;color: #aaa;}
*/
/*固定ページで投稿日・更新日を非表示*/
.page .date-tags {display: none;}
/* h1 */
.article h1{position: relative;padding: 10px 10px;border-bottom: 3px solid #7D6E83;width:100%;margin-bottom: 40px;margin-top:10px;background-color:transparent;}
.article h1:before {position: absolute;left: 50px;bottom: -40px;content: '';border-width: 20px;border-style: solid;border-color: #7D6E83 transparent transparent transparent;}
.article h1:after {position: absolute;left: 50px;bottom: -36px;content: '';border-width: 20px;border-style: solid;border-color: #F8EDE3 transparent transparent transparent;}
/* h2 */
.article h2 {margin:  0;padding-left:5px;padding-bottom: 5px;margin-bottom: 35px;position:  relative;background-color:transparent;}
.article h2:before {content: '';width: 50px;height: 4px;background-color: #7D6E83;display: block;position: absolute;left:  0;bottom: -6px;}
/* h3 */
.article h3 {margin:0 auto;border:0;padding:0;}
.article h3 {position: relative;line-height: 1.4;padding-left: 1.2em;margin:15px 15px;}
.article h3:before {font-family: "Font Awesome 5 Free";content: "\f5a7";font-weight: 900;position: absolute;font-size: 1em;left: 0;top: 0;color: #333;font-weight: 900;}
/* h4 */
.article h4 {margin:0 auto;border:0;padding:0;}
.article h4 {position: relative;padding-left: 36px;line-height: 1.4;}
.article h4:before {margin-left:16px;font-family: "Font Awesome 5 Free";content: "\f14a";font-weight: 700;position: absolute;font-size: .9em;left: 0;top: 0;color: #777;}
/* top title */
.topttl {position: relative;padding: .3em;text-align: center;font-size:1.4em;margin-top:80px;}
.topttl:before {content: "";position: absolute;top: -20%;left: 50%;width: 150px;height: 130%;border-radius: 50%;border: 3px solid #D0B8A8;border-left-color: transparent;border-right-color: transparent;transform: translateX(-50%);}
/**/
.balloon {display: flex;justify-content: center;align-items: center;font-size: 18px;font-weight:800;text-align: center;margin-bottom:80px;}
.balloon::before, .balloon::after {content: '';width: 50px;height: 3px;background-color: #D0B8A8;}
.balloon::before {margin-right: 10px;}
.balloon::after {margin-left: 10px;}
/* top_btn */
.button_top1{margin-bottom:30px;}
.button_top1 a {position: relative;display: flex;justify-content: space-around;align-items: center;margin: 0 auto;max-width: 300px;padding: 10px 25px 10px 60px;color: #FFF;transition: 0.5s ease-in-out;font-weight: 500;background: #7D6E83;filter: drop-shadow(0px 2px 4px #ccc);border-radius: 3px;text-decoration:none;}
.button_top1 a:before {content: "";width: 35px;height: 100%;position: absolute;background: #FFF;left: 20px;top: -5px;clip-path: polygon(100% 0%, 100% 100%, 50% 75%, 0 100%, 0 0);}
.button_top1 a:after {font-family: "Font Awesome 5 Free";content: "\f5a7";font-weight: 600;position: absolute;left: 28px;top: 6%;color: #7D6E83;}
.button_top1 a:hover {transform: translateY(-2px);box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);background-color:#954a4a;}
/* blog_card */
.blogcard-label{background-color:#b37266;}
/* sfdbtn1 */
.btn-sfdbtn1 {background-color: #7D6E83;}
/* parallax */
.parallax {min-height:450px;margin: 0 calc(50% - 50vw);width: 100vw;background-position: center bottom;background-repeat: no-repeat;
background-attachment:fixed;background-size:cover;}
.parallax.bg-00 {background-image:url(//totonoegoto.com/wp-content/uploads/2022/12/bg0001.jpg);}
.parallax.bg-01 {background-image:url(//totonoegoto.com/wp-content/uploads/2022/10/bg002.jpg);}
.parallax.bg-02 {background-image:url(//totonoegoto.com/wp-content/uploads/2022/12/totonoegoto_bg03.jpg);}
/* 囲み枠 */
.box_pdc {position: relative;margin: 2em 0;padding: 0.5em 1em;border: solid 3px #c08181;border-radius: 8px;font-size:.8em;line-height:1.1em;}
.box_pdc .box-title {position: absolute;display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;font-size: 19px;background: #F8EDE3;color: #c08181;font-weight: bold;}
.box_pdc p {margin: 0; padding: 0;}
.box_pdc ul{margin-bottom: .8em;}
/*  */
ul li.sfdlist1:before{
font-family: "Font Awesome 5 Free";font-weight: 600;content: "\f06c";padding-right:8px;}
ul li.sfdlist2:before{
font-family: "Font Awesome 5 Free";font-weight: 600;content: "\f5a7";padding-right:8px;}
ul li.sfdlist1, ul li.sfdlist2{margin: 0em;padding: 0;list-style: none;line-height: 1.5em;text-indent: -1em;}
/*  */
.bg-image-loop {
	width: 100%;
	height: 518px; /* 画像の高さを指定 */
	position: relative;
	background: url("//totonoegoto.com/wp-content/uploads/2023/01/topsc01-scaled.jpg") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 23s linear infinite; 
	margin: 80px 0;
	padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -2560px 0; } /* 1666pxは使用した背景画像の長さ */
}
/*  */
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*  */
.hosoku{
    margin-left: 10px;
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: .85em;
    border-left: #aaa 3px solid;
    line-height: 1.4em;
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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