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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*プログラム、のリスト表示の表示方法（日本語下手）*/
.pro_li_lineheight{
	line-height:115%;
	font-size:95%;
}

/*アコーディオンメニューここから*/
.accordion-008 {
    max-width: 1500px;
    margin-bottom: 10px;
    border-radius: 25px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
    background-color: #FFF19C;
}

.accordion-008 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 1em 0 1em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-008 summary::-webkit-details-marker {
    display: none;
}

.accordion-008 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}

.accordion-008[open] summary::after {
    transform: rotate(225deg);
}

.accordion-008 span {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding-bottom: 20px;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-008[open] span {
    transform: none;
    opacity: 1;
}
/*アコーディオンメニューここまで*/

.aco_moji{
	padding-left:20px;
	padding-right:20px;
	text-align:center;
	font-size:80%;
}

div.aco_moji p{
	margin-bottom:8px;
}


/*769-1023pxの間*/
@media screen and  (min-width: 769px) and (max-width: 1023px){
	
	
	
	/*カラムの空白*/
	.columns_padding01{
		padding-left:10px;
		padding-right:10px;
	}

	.columns_padding02{
		padding-left:10px;
		padding-right:10px;
	}
	
	.columns_padding03{
		padding-left:10px;
		padding-right:10px;
	}

}


/*1024px以上*/
@media screen and (min-width: 1023px){
	
	/*カラムに線を引く*/
	.columns_mannaka{
		border-left:solid #c6b98d 1px;
		border-right:solid #c6b98d 1px;
	}

	/*カラムの空白*/
	.columns_padding01{
		padding-left:0px;
		padding-right:50px;
	}

	.columns_padding02{
		padding-left:50px;
		padding-right:50px;
	}

	.columns_padding03{
		padding-left:50px;
		padding-right:0px;
	}
	
}

/*文字を小さく*/
.moji_tiisai{
	font-size:90%;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.moji_tiisai{
		font-size:80%;
	}
	
}

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

/*キービジュアルセクション*/
.keyvisual_section{
	margin-top:-80px;
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*キービジュアルセクション*/
	.keyvisual_section{
		margin-top:-50px;
	}
}

/*Q_and_A背景＿赤＿a*/
.q_and_a_bkpc_red_a{
	background-image: url(https://tunamayo.tuna-can.com/wp-content/uploads/q_and_a_red_a.png);
	background-size: 100% auto;
	background-position: top;
	background-repeat: no-repeat;
	padding-top:23%;
	height:100%;
	margin-bottom:50px;
}

.q_and_a_bkpc_red_b{
	background-image: url(https://tunamayo.tuna-can.com/wp-content/uploads/q_and_a_red_b.png);
	background-size: 100% auto;
	background-position: top;
	background-repeat: no-repeat;
	padding-top:23%;
	height:100%;
	margin-bottom:50px;
}

.q_and_a_title{
	font-size:160%;
	line-height:180%;
	text-align:center;
	font-weight:bold;
	color:white;
}

.q_and_a_answer{
	text-align:center;
	font-size:130%;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
}

.q_and_a_syosai{
	text-align:center;
	font-size:80%;
	line-height:140%;
	padding-left:20%;
	padding-right:20%;
	padding-bottom:10%;
	
	height:25vh;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.yokuaru_columns_oya, .yokuaru_columns_ko{
		margin-top:0px!important;
		margin-bottom:-100px!important;
		padding-top:0px!important;
		padding-bottom:0px!important;
	}
}

.yokuaru_title{
	margin-bottom:-30px!important;
}




/*モバイルフッダーメニュー非表示*/
.mobile-footer-menu-buttons{
  display: none;
}

/*ヘッダーモバイルボタンを非表示*/
.home-menu-button{
	display: none;
}

/*文字を特定の位置で改行させる*/
.kaigyo_kun span {
	display: inline-block;
}

/************************************
** ■見出しカスタマイズ（h1-6）
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
position:relative;
	background-color:transparent;
}


.article h1 {
	position: relative;
	padding-bottom: 10px;
	font-size: 26px;
}

.article h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 11px);
	margin-bottom:5px;
}

/*見出し(h2)　*/
.article h2:not(.img_h2)  {
	padding: 1rem 0 1rem;
    background-image: repeating-linear-gradient(45deg, #c9d05d 0 2px, transparent 2px 4px);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: center bottom;
    color: #db7700;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
	margin-bottom:45px;
}


/*.article h2:not(.img_h2) {
  padding: 8px 13px;
  border-left: 6px solid #f3d923;
	font-size:20px;
	margin-top:50px;
	margin-bottom:15px;
}*/


.article h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 140%;
	text-align: center;
	margin-bottom:20px;
}

.article h3::before,
.article h3::after {
	content: '';
	width: 30px;
	height: 3px;
	background-color: #bdb69e;
}

.article h3::before {
	margin-right: 20px;
}
.article h3::after {
	margin-left: 20px;
}

.article h4{
	font-size:120%;
	border-bottom:solid 3px #fff088; /*線の種類（実線） 太さ 色*/
	margin-top;60px;
	margin-bottom:20px;
}

/*文字色しろ*/
.font_white{
	color:white;
}

/*ご利用について、とかの文字ボックス*/
.txt_box_red {
	display:inline-block;
	background:#d6697e; /*背景色の指定*/
	color:#FFFFFF;
	font-weight:bold;
	padding-left:20px;
	padding-right:20px;
	padding-top:6px;
	padding-bottom:6px;
	border-radius:10px;
	text-align:center;
	margin-bottom:10px !important;
	font-size:120%;
}

/*ご利用について、とかの文字ボックス*/
.txt_box_white {
	display:inline-block;
	background:#FFFFFF; /*背景色の指定*/
	color:#000000;
	font-weight:bold;
	padding-left:20px;
	padding-right:20px;
	padding-top:6px;
	padding-bottom:6px;
	border-radius:10px;
	text-align:center;
	margin-bottom:10px !important;
	font-size:120%;
}

.chu_o{
	text-align:center;
}

/*フッタのサイズ*/
.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  /*width: 100px;*/ /*ロゴ画像を少し大きく*/
  margin: 0 auto;
}


.footer-bottom-logo img {
	height: 70px;
	width: auto;
}

.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
  color: #FFFFFF; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #aab3b9; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
  color: #FFFFFF; /*クレジットの文字色*/
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}

/*---------------------------------
固定ページの日付を非表示にしたいとき
--------------------------------*/
.page .date-tags {
display: none;
}


/*ヘッダ画像を、画面サイズによって変更*/
@media screen and (max-width: 480px){
	
	
	.logo-header.logo-image{
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		width:45vw;
		height:auto;
		
	}
	

	
}


/*ヘッダ画像を、画面サイズによって変更*/
@media screen and (max-width: 480px){
	/*スマホかつアイフォンのみ適応*/
	::-webkit-full-page-media, :future, :root .logo-header.logo-image{
		/* ここに書く */
			padding-top:3vh;
		
	}
}

/*480px以下、スマホのとき*/
@media screen and (max-width: 480px){

	
	.header div.header-in {min-height: 200px !important;}
	.header {
		background-image: url(https://tunamayo.tuna-can.com/wp-content/uploads/tunamayo_header_sumaho_c.png);
		background-size: 100% auto;
		background-position: top;
	}
}

/*ヘッダ画像を、画面サイズによって変更*/
@media screen and (max-width: 480px){
	
	
	/*スマホかつアイフォンのみ適応*/
	::-webkit-full-page-media, :future, :root .header{
		/* ここに書く */
		background-image: url(https://tunamayo.tuna-can.com/wp-content/uploads/tunamayo_header.png);
		background-size: auto 100%;/*background-position: top center;
		*/
		
	}
}

/*ｈ１タイトル非表示くん*/
.home.page .entry-title{
  display: none;
}



/*セクション*/
.change-area01 {
    background: #f3da47;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:50px;
}

/*セクション*/
.change-area02 {
    background: #fca251;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:0px;
}

/*480px以下、スマホのとき*/
@media screen and (max-width: 480px){
	.change-area02 {padding-top:50px;}
}


/*セクション2の背景上*/
.change-area02_backpic_ue {
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
	
	margin-top:-20px;
	margin-bottom:-35px;
	padding-top:0px;
	padding-bottom:0px;
}

/*セクション2の背景上*/
.change-area02_backpic_shita {
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
	
	margin-top:-35px;
	margin-bottom:0px;
	padding-top:0px;
	padding-bottom:0px;
}

/*セクション*/
.change-area03 {
    background: #88d882;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
	
	margin-bottom:-30px;
}

/*セクション*/
.change-area04 {
    background: #92d4f5;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
	
	margin-bottom:-30px;
}

/*セクション*/
.change-area05 {
    background: #f4bac0;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
	
	margin-bottom:-40px;
}

/*セクション*/
.change-area06 {
    background: #f39838;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
	
	margin-bottom:-135px;
}



/*セクション*/
.change-area_line {
    background: #FFFFFF;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
}


/*セクション*/
.change-area_orange02 {
background: #f39838;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
}

/*セクション*/
.change-area_yellow02 {
background: #f5dd92;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0 calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:50px;
	padding-bottom:30px;
}


/*支援プログラムのセクション*/

/*セクション*/
.shien_change-area_yellow {
    background: #f3da47;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:20px;
	
}

/*セクション*/
.shien_change-area_blue {
    background: #92d4f5;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:20px;
	
}

/*セクション*/
.shien_change-area_orange {
    background: #f39838;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:20px;
	
}

/*セクション*/
.shien_change-area_white {
    background: #FFFFFF;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:20px;
	
}

/*セクション*/
.shien_change-area_white02 {
    background: #FFFFFF;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:60px;
	padding-bottom:100px;
	
}

/*セクション*/
.shien_change-area_green {
    background: #88d882;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:20px;
	
}

/*セクション*/
.shien_change-area_pink {
    background: #f4bac0;
    margin: 0 calc(50% - 50vw); /*左右の余白調整*/
    padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	
	/*上下余白*/
	padding-top:20px;
	padding-bottom:20px;
	
}

/*セクション（支援スマホキービジュアル）*/
.shien_sumaho {
	/*上下余白*/
	margin-top:-50px;
	
}


/*Lineのボタン周り*/
a.btn--green {
color: #fff;
background-color: #06C755;
}

a.btn--green:hover {
  color: #fff;
  background-color: #24ED75;
}

/*メールフォームのボタンまわり*/
a.btn--orange {
color: #fff;
background-color: #e6a200;
}

a.btn--orange:hover {
  color: #fff;
  background-color: #ffd162;
}

/*TOPへ戻るのボタンまわり*/
a.btn--yellow {
color: #4d4a2f;
background-color: #e9d20d;
}

a.btn--yellow:hover {
  color: #4d4a2f;
  background-color: #fff070;
}

a.btn-c {
  font-size: 1.5rem;
  position: relative;
  width:300px;
  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
  border-radius:40px;
}

a.btn-c-mini {
  font-size: 1.1rem;
  position: relative;
  width:350px;
  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
  border-radius:40px;
}

.btn_centers{
	text-align:center;
}

.btn_centers_margin_bottom{
	margin-bottom:30px;
}

.btn_centers_margin_bottom02{
	margin-bottom:60px;
}
/* * { outline: 2px solid red; }*/


/*お知らせのCSS*/
ul.news_list{
	list-style:none;
	list-style-position: outside;
	padding-left:0px;
}

.news_date{
	color:#a7a7a7;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
	}


.news_midashi{
	font-size:0.9em;
	padding-bottom:10px;
 	border-bottom: 1px solid #ddd;
	margin-bottom:10px;
}

/*お知らせの編集者情報はいらないだろ！いい加減にしろ！*/
span.author{
	display:none!important;
}

span.add_New{
	background:red;
	color:white;
	padding-left:5px;
	padding-right:5px;
	font-size:90%;
	margin-left:15px;
}

.oshirase_ichiran{
	text-align:right;
}

/*お問い合わせページの電話対応時間*/
.tel_taiou_txt{
	font:#bba303;
	font-size:95%;
	line-height:130%;
	margin-bottom:40px;
}

/*アンサーパディング☆*/
.aw_pdg_r{
	padding-right:10px;
}

/*1023px以上*/
@media screen and (min-width: 1023px){

	/*らくぞうの部分の余白*/
	.columns_rakuzou_left{
		padding-left:140px;
		padding-right:10px;
	}

	.columns_rakuzou_right{
		padding-left:10px;
		padding-right:140px;
	}
	
}

.border_test{
	border:solid red 1px;
}

/*スマホだけ（小さい画面だけ）表示するやつ*/
/*768px以上*/
@media screen and (min-width: 768px){
.sumaho_dake_hyouji{
	display:none;
}
}
	
/*スマホだけ（小さい画面だけ）表示しないやつ*/
/*768px以上*/
@media screen and (max-width: 768px){
.sumaho_dake_hyouji_shinai{
	display:none;
}
}

/*リストの行間*/
ul.li_miyasuku li{
	margin-bottom:25px;
	line-height:150%;
}