@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
*/
/*ADD:追加cssはここに記入。style.cssは使用しない*/

/*cocooon設定--フォント--メイリオを'BIZ UDPGothic'に書き換えて使用*/
@font-face {/*normal*/	
		src:url("https://masuda-syouten.co.jp/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Regular.woff2") format('woff2'), url("https://masuda-syouten.co.jp/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Regular.woff") format("woff");	
	font-family:'BIZ UDPGothic';
    font-weight:400;
    font-style: normal;
    font-display: swap;
 }
@font-face {/*bold*/	
	src:url("https://masuda-syouten.co.jp/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Bold.woff2") format('woff2'), url("https://masuda-syouten.co.jp/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Bold.woff") format("woff");	
    font-family: 'BIZ UDPGothic';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
 }
.ff-meiryo{	font-family: 'BIZ UDPGothic'; /*400*/}
bolderb, strong,boldstrong, b{font-weight:700;}
:root{
	/*
	 --bs-white
	 --bs-body-color:#212529
	--bs-secondary:#6c757d;
	--bs-dark-border-subtle;
	--cocoon-text-color:#101010;
	 */
    --color_pink:#e8a5a2;
	--color_gold:#bfb28f;
	--color_gray:#b3b9bd;
	--color_darkgray:#909da5;
	--color_green:#00a75a;
	--color_black:#101010;
	
	--fs_14:0.875rem;
	--fs_18:1.125rem;
	--header_h:90px;/*ヘッダーの高さ*/
	--header_h_s:60px;/*ヘッダーの高さ*/
	/*--mv_h: calc( 100vh );/*メインビジュアルの高さ*/
	--subpagetop_h:300px;/*サブページトップ*/
	--content_w:900px;/*コンテンツ幅を固定*/
	--mobilemenu_size:80px;

	 --font_jp_name:'BIZ UDPGothic', sans-serif;
	 --font_jp_min:"BIZ UDPMincho", serif;
	--font_en_name:/*"Lato", sans-serif; /*400*/ "Outfit", sans-serif;
	--font_fa_name:"Font Awesome 5 Free";
	--fluid_max_w:2500x;
}

body{letter-spacing: 0.05em;}
img{width:100%;height:auto;} 
a{transition: all .3s;}

/*cocoon設定の初期化*/
article a:hover{color:var(--color_sub);}
a:hover {text-decoration:none;}
.article dd{margin:0;}

/*ulのスタイルを解除するには .ul_unstyledを使用する。使用できない場合はこちらに記述*/
ul.ul_unstyled,ul[id^="menu-sitemap-"],ul[id^="menu-sitemap-"]  ul.sub-menu {list-style-type: none;padding: 0;}
ul.ul_unstyled li,ul[id^="menu-sitemap-"] > li{margin: 0;}

/*fluid-maxwide*/
.container-fluid.fluid-maxwide{max-width:var(--fluid_max_w);} /*container-fluidに.fluid-maxwideを追加することでmax値を設定*/


/*loading---------------------------------*/
/*枠組み*/
.loader-wrap {
	z-index: 99999;
	position: fixed;
	/*top:-2rem;/*bodyの謎の余白の考慮*/
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background:var(--color_black);
	color:var(--bs-white);
	overflow: hidden!important;
	padding:0 1.5rem;
}
#loading_logo{
	display:block;
	width:80%;
	max-width:150px;
	height:auto;
	position:absolute;
	 top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
#loading_logo{stroke:#ffffff;}
#loading_logo #kanji, #loading_logo #tatami,#loading_logo #since{opacity:0;animation: fadeIn_loading 0.5s ease forwards;}
@keyframes fadeIn_loading {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#loading_logo #kanji{animation-delay: 0.8s;}
#loading_logo #tatami{animation-delay: 1.4s;}
#loading_logo #since{animation-delay: 2s;}

/* 線を描くアニメーション:start*********** */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
/* --- line_* --- */
#line_1 {
  stroke-dasharray: 299.16;
  stroke-dashoffset: 299.16;
  animation: draw 0.15s linear forwards;
  animation-delay: 0.5s;
}
#line_2 {
  stroke-dasharray: 299.16;
  stroke-dashoffset: 299.16;
  animation: draw 0.15s linear forwards;
  animation-delay: 0.675s;
}
#line_3 {
  stroke-dasharray: 1120.88;
  stroke-dashoffset: 1120.88;
  animation: draw 0.56s linear forwards;
  animation-delay: 0.85s;
}
#line_4 {
  stroke-dasharray: 339.05;
  stroke-dashoffset: 339.05;
  animation: draw 0.17s linear forwards;
  animation-delay: 1.435s;
}
#line_5 {
  stroke-dasharray: 339.05;
  stroke-dashoffset: 339.05;
  animation: draw 0.17s linear forwards;
  animation-delay: 1.63s;
}

/* --- waku_1 --- */
#waku_1 polyline:nth-of-type(1) {
  stroke-dasharray: 193.48;
  stroke-dashoffset: 193.48;
  animation: draw 0.095s linear forwards;
  animation-delay: 1.825s;
}
#waku_1 polyline:nth-of-type(2) {
  stroke-dasharray: 192.25;
  stroke-dashoffset: 192.25;
  animation: draw 0.095s linear forwards;
  animation-delay: 1.945s;
}
#waku_1 polyline:nth-of-type(3) {
  stroke-dasharray: 195.16;
  stroke-dashoffset: 195.16;
  animation: draw 0.10s linear forwards;
  animation-delay: 2.065s;
}
#waku_1 polyline:nth-of-type(4) {
  stroke-dasharray: 194.03;
  stroke-dashoffset: 194.03;
  animation: draw 0.10s linear forwards;
  animation-delay: 2.19s;
}

/* --- waku_2 --- */
#waku_2 polyline:nth-of-type(1) {
  stroke-dasharray: 200.33;
  stroke-dashoffset: 200.33;
  animation: draw 0.10s linear forwards;
  animation-delay: 2.31s;
}
#waku_2 polyline:nth-of-type(2) {
  stroke-dasharray: 199.47;
  stroke-dashoffset: 199.47;
  animation: draw 0.10s linear forwards;
  animation-delay: 2.435s;
}
#waku_2 polyline:nth-of-type(3) {
  stroke-dasharray: 198.86;
  stroke-dashoffset: 198.86;
  animation: draw 0.10s linear forwards;
  animation-delay: 2.56s;
}
#waku_2 polyline:nth-of-type(4) {
  stroke-dasharray: 199.36;
  stroke-dashoffset: 199.36;
  animation: draw 0.10s linear forwards;
  animation-delay: 2.69s;
}
/* 線を描くアニメーション:end*********** */
.loader-wrap .eachTextAnime_loading span{
	opacity: 0;
	position: relative;
}
.loader-wrap .eachTextAnime_loading.is-show span{
	animation-name : text_anime_on_loader;
	animation-duration: 0.4s;
	animation-timing-function:ease-out forwards; 
	animation-fill-mode:forwards;
}
@keyframes text_anime_on_loader {
	0% {opacity:0;left: 15px;}
	100% {opacity:1;left:0px;}
}

/*mainimg vegas------------------------------*/
.header-cover {
    margin: 0 auto;
    width: 100%;
    background:var(--bs-black);
	background-image:url('../../../uploads/mainimg_01-min.jpg');
	background-position:center center;
	background-size:cover;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
	z-index:0;
}
.slider {
	z-index:1;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    background-position:center;
    background-size: cover;
}
#main_catch{
	display:block;
	width:50%;
	max-width:180px;
	height:auto;
	position:absolute;
	 top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
     z-index:4;
}
#main_catch.fadeIn.is-show{animation-duration:1.5s;animation-delay:0.5s;}

/*header---------------------------------*/
/*ヘッダーを固定・透過：cocoon設定のヘッダー--固定は解除する！独自デザイン jsで追従設定*/
.header-container{
	position: fixed!important; 
	top: 0px; left: 0px; width: 100%!important;
	z-index:10;
	transition: 0.5s;
}
.header-container.scroll-nav{ top :-100px;}
#header-container{
	background: transparent;
}
.header,#header-container .navi{ background: transparent;}

/*logo*/
.header-container-in.hlt-top-menu .logo-header {max-height :var(--header_h); padding-top:20px;padding-left:20px;}
.header-container-in.hlt-top-menu{padding-right:130px;}
.header-container-in.hlt-top-menu.wrap{width:100%;}
.site-name-text-link{padding:0;}
.logo-header img{width:100%!important; max-width:300px!important}

/*gnavi*/
/*.navi-in > ul li{height:var(--gnavi_h); border-left:1px solid rgba(var(--bs-white-rgb), 0.7);}
.navi-in > ul li:first-child{border-left:none;}
.navi-in > ul li.header_entry{
	background-color:var(--color_green);
	border-left:none;
	border:1px solid var(--bs-white);
	margin-left:1rem;
}
#navi .navi-in>.menu-header .sub-menu{
	background-color:transparent!important;
}
.navi-in  ul.sub-menu > li{
	background:rgba(var(--color_green_rgb),1);
	height:calc(var(--gnavi_h) / 1.5)!important;
	border:1px solid var(--bs-white);
	border-radius:100vh;
	margin: 2px 0;
}
#navi .navi-in>ul>li>a{padding:0 1.2em;}
#navi .navi-in  ul.sub-menu > li > a:hover {border-radius:100vh;}
#navi .navi-in > ul > li > a:hover {background-color:rgba(var(--color_green_rgb),0.6);}
/*#navi .navi-in>.menu-header .sub-menu > li > a{color:var(--cocoon-text-color);}*/

/*mobilemenu:常に表示*/
/*gnave非表示*/
.navi-in .menu-pc {display: none;}
/*mobilemenu:表示*/
.mobile-menu-buttons{
	display:flex;
	justify-content: space-between;
	top:10px;
	bottom:auto;
	right:10px;
    left:auto;
	background-color:transparent;
	box-shadow:none;
	width:80px;
	height:80px;
	z-index:20;
}
.mobile-menu-buttons .menu-button{
	width:100%;
	height:100%;
}
.menu-button-in{
	width:100%;
	height:100%;
/*    background-color:var(--color_green);
	border:1px solid var(--bs-white);
	border-right: none;
	border-radius:10px 0 0 10px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;*/
	background-image:url('https://masuda-syouten.co.jp/wp-content/uploads/btn_menu.svg'),url('https://masuda-syouten.co.jp/wp-content/uploads/btn_menu_hover.svg');
	background-repeat:no-repeat;
	background-size:cover;
	-webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}
.menu-button-in:hover{
	background-image:url('https://masuda-syouten.co.jp/wp-content/uploads/btn_menu_hover.svg');
 	opacity:1!important;
}

.sidebar-menu-button .menu-icon{
	display:none;
}
.navi-menu-content{/*右からスライドに変更*/
	left: auto;
	right: 0;
	transform: translateX(101%);
	background-color:rgba(32,33,33,0.9);
	padding:0;
    margin:0;
}
.menu-content .menu-drawer{padding-top:30px;}
.menu-close-button{color:var(--color_pink);text-align:right;padding:0 10px;}
.fa-times:before{content:'\f00d';}
/*mobile sidebar*/
.menu-content,.sidebar{background-color:var(--color_black);}
#slide-in-sidebar{padding: 0 1rem ;}
	.widget-sidebar { margin-bottom:2rem!important;}
.widget_nav_menu ul > li > a{
	padding:0.75rem 0.25rem ;
	color:var(--bs-white);
	text-align:center;
}
.widget_nav_menu ul > li > a:hover{
	background-color:var(--bg_black);
	color:var(--color_pink);
}
#mobile_policy ul[id^="menu-sitemap-"]{gap:10px;}

/*footer---------------------------------*/
/*コピーライトエリア*/
.footer,.footer-bottom{ margin-top:0;font-size:0.75rem;padding:1.5rem 0;}
/*コンテンツ下部エリア*/
.footer_logo_img{max-width:280px;}

/*content-bottomの幅を100%に変更*/
#content-bottom-in.wrap{width:100%;}
.content-bottom{margin:0;}
.widget.widget-content-bottom,.content-bottom{margin-bottom:0;!important}

/*foote-sitemap & slide-menu*/
ul[id^="menu-sitemap-"]{
	margin-bottom:0;
	display:flex;
	flex-wrap:wrap;
}
#footer_menu_01 ul[id^="menu-sitemap-"]{gap:50px;}
#footer_menu_02 ul[id^="menu-sitemap-"]{gap:20px;}
ul[id^="menu-sitemap-"] a{
	color:var(--bs-white);
	padding: 0.5rem 0;
	display:block;
}
ul[id^="menu-sitemap-"] a:hover{ color:var(--color_pink);}

/*トップページ*/
#home_ourwork{
	background-image:url('../../../uploads/bg_illust_work.png');
	background-repeat:repeat;
	background-size:250px 250px;
}
.home_ourwork_title{
 top:0;
left:0;
width:100px;
height:100%;
}

ul#list_work > li {border-top:1px solid var(--bs-dark-border-subtle);}
ul#list_work > li:last-child {border-bottom:1px solid var(--bs-dark-border-subtle);}
ul#list_work > li > a{ 
	display:flex;
	align-items:center;
	padding: 0.25rem 3rem 0.25rem 1rem;
	 position:relative;
}
ul#list_work > li > a:hover{
	background-color:var(--bs-light);
	
} 
ul#list_work > li > a::after{
	content:'';
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	background-image:url('https://masuda-syouten.co.jp/wp-content/uploads/icon_arrow_right.svg');
	background-size:contain;
	 top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
ul#list_work > li > a > span:first-child{
	width:3em;
	display: inline-block;
	flex-shrink: 0; / 幅を固定 */
}
ul#list_work > li > a > span:last-child{
	flex: 1; 
	word-break: break-word; 
}
/*home illust*/
#home_about .bg_tatami {
	 animation: none;
	opacity:0;
  position: absolute;
  right: 4%;
  top: 4%;
  width: calc(300px / 2);
  height: calc(400px / 2);
  z-index: -2;
  pointer-events: none;
  transform-origin: top right;
  will-change: transform, opacity;
}
#home_about .bg_tatami.is-show {
	  animation: soft-bloom 30s linear infinite both;
}

#home_about .bg_tatami img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes soft-bloom {
  0%   { opacity: 0;   transform: scale(1.0); }
  10%  { opacity: 0.9; transform: scale(1.0); }
  30%  { opacity: 0.8; transform: scale(1.5); }
  50%  { opacity: 0.7; transform: scale(2.5); }
  70%  { opacity: 0.6; transform: scale(3.5); }
  90%  { opacity: 0.4; transform: scale(4.5); }
  100% { opacity: 0;   transform: scale(5.0); }
}
#home_about .bg_flower{
	width:120px;
	height:120px;
	left:20%;
	top:25%;
	z-index:-2;
}

#home_about .bg_blossom{
	width:100px;
	height:100px;
	right:10%;
	bottom:5%;
}

/*subpage下層ページ---------------------------------*/
/*パン屑 homeは非表示にする*/
.breadcrumb{margin:0 ; padding:1rem;}
.breadcrumb, .breadcrumb a{color :var(--color_black);font-size:var(--fs_14);}

/*固定+トップ共通*/
.article h2,.article h3,.article h4,.article h5{
	background-color:transparent;
	margin-bottom:0;
	padding:0;
	margin-block-start: 0;
    margin-block-end:0;
	border:none;
}
body.home.entry-content,body.page.entry-content{margin-bottom:0!important;}

/*固定ページテンプレート-----------------------*/
.page .date-tags {display: none;}
.content{margin-top:0;}
.main{padding: 0;}

/*投稿ページ共通 投稿ページはページタイプを1カラム狭いに強制*/
.page:not(.column-full-wide) .content-in,.single.single-format-standard .content-in,.archive .content-in{max-width:var(--content_w);padding:0 16px;}

/*固定ページヘッダー*/
.entry-title{display:none;}/*既存タイトル非表示*/

#subpage_title{
	height:var(--subpagetop_h);
	padding:1rem;
	padding-top:calc(var(--header_h) + 1rem);
	background-image:url('https://masuda-syouten.co.jp/wp-content/uploads/bg_subtitle-min.jpg');
	background-size:cover;
	background-position:left center;
}
#subpage_title h1{line-height:1.2;letter-spacing:0.2rem;}

/*リンク*/
.body:not(.home) .entry-content a,
.single .entry-content a {
	border-bottom:1px dotted var(--bs-secondary);
	padding-bottom:0.25rem;
}


/*dl-----------------------------*/
dl.dl_table{
margin-left:0 ;
margin-right:0;
margin-block-start: 0;
 margin-block-end: 0;
}
dl.dl_table{
 border-radius: 0.5px;
 }
dl.dl_table > dt{
    border-bottom: 1px solid var(--bs-dark-border-subtle);
	 border-radius: .5px;
     padding: 20px 5px 16px 15px;
	font-weight:normal;
	margin-bottom: 0;
}
dl.dl_table > dd{
    border-bottom: 1px solid var(--bs-dark-border-subtle);
	 border-radius: .5px;
    padding: 20px 5px 16px 15px;
	margin-bottom: 0;
	margin-left:0;
}
@media (max-width:767px){
	dl.dl_table > dt{border:none;padding-bottom: 5px;padding-top: 5px; background-color:var(--bs-light);border-bottom:none;border-top:1px solid var(--bs-dark-border-subtle);}
	dl.dl_table > dd{padding-top: 14px; padding-bottom: 20px;border:none;}
	dl.dl_table{border-bottom:1px solid var(--bs-dark-border-subtle);}
}

/*btn--------------------------------------*/
.btn_green{ 
	padding: 1.25rem 2rem;
	background-color:var(--color_green);
	border:2px solid var(--color_green);
	color: var(--bs-white);
	text-align:center;
	border-radius:50vh;
	cursor:pointer;
}
.btn_green:hover{
	color:var(--color_green);
	background-color:var(--bs-white);
} 
.btn_right{ 
	position: relative;
	padding: 1.25rem 2rem;
	background-color:var(--bs-white);
	border:1px solid var(--color_black);
	color: var(--color_black);
	letter-spacing:0.1rem;
	text-align:center;
	border-radius:50vh;
}
.btn_right::after{
	 content:'';
	display:block;
	width:30px;
	height:30px;
    background-image:url('https://masuda-syouten.co.jp/wp-content/uploads/icon_arrow_right.svg');
	background-size:contain;
	background-repeat:no-repeat;
    position: absolute;
	right:1rem;
	 top :50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);	
	z-index:1;
}
.btn_right:hover{background-color:var(--bs-light);}

/*.btn_footer{ 
	display:block;
	background-color:var(--color_gold);
	color: var(--bs-white);
	padding:0.5rem 2rem;
	text-align:center;
}
.btn_footer:hover{
	background-color:var(--color_sub);
	color: var(--bs-white);
}*/

/*deco---------------------------------------*/
/*ul：丸付き*/
ul.list_gray {
    list-style-type: none; 
    padding-left: 0; 
}
ul.list_gray > li {
    padding-left:1.5rem; 
	position:relative;
}
ul.list_gray >li:before {
	font-family: var(--font_fa_name);
	font-weight: 400;
    content:'\f111'; 
	font-size:1rem;
    color: var(--color_darkgray);
    position:absolute;
	left:0;
	top:0.2rem;
}

/*共通---------------------------------------*/
.fs_14{font-size:var(--fs_14)!important;}
.fs_18{font-size:var(--fs_18)!important;}
.font_bold{font-family: var(--font_jp_name);font-weight:700!important;} 	
.font_min{font-family:var(--font_jp_min);font-weight:400!important;}
.font_en{font-family: var(--font_en_name);font-weight:400!important;} 
.fw-400 { font-weight: 400!important;}

.color_body{color:var(--cocoon-text-color);}
.color_darkgray{color:var(--color_darkgray);}
.color_pink{color:var(--color_pink);}

.bg_gold{background-color:var(--color_gold);}
.bg_black{background-color:var(--color_black)!important;}

/*a.link_white{color:var(--bs-white)!important;}
a.link_white:hover{color:var(--color_sub)!important;}*/

.text_vertical{/*縦書き*/
	letter-spacing: 0.2em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
}

/*animation--------------------------------*/
.fadeIn,.fadeUp{opacity: 0;}
.delay_s{animation-delay: 0.4s;}
.delay_m{animation-delay: 0.8s;}
.delay_l{animation-delay: 1.2s;}
.delay_1{animation-delay: 1.6s;}
.delay_2{animation-delay: 2s;}
.delay_3{animation-delay: 2.4s;}
.delay_4{animation-delay: 2.8s;}

.fadeIn.is-show{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000; 
perspective: 1000; 	
will-change: transform, opacity;
animation-name: fadeInAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/************************************
** bootstrap:レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (min-width: 1200px){
}
@media screen and (max-width: 1199.98px) { /*xl（ここからmobile-menu表示）*/
}
@media screen and (max-width:991.9px){/*lg*/	
}
@media screen and (max-width:767.9px) {/*md: sp*/
	.header-cover {background-image:url('../../../uploads/mainimg_sp_01-min.jpg');}
	#main_catch{max-width:130px;}
	#home_about .bg_flower{left: 5%;}
	#home_about .bg_blossom{bottom:0;}	
  ul[id^="menu-sitemap-"]{
	display:inline;
	 text-align:center;
	}
}
@media screen and (max-width:575.9px){/*sm*/
.header-container-in.hlt-top-menu .logo-header {padding-left:10px!important;}	
	.home_ourwork_title{width:50px;}
	#subpage_title {height:calc( var(--subpagetop_h) / 1.5);}
}

/************************************
** cocoon:レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下 humbergerMenuの表示*/
@media screen and (max-width: 1023px){
	.header-container-in.hlt-top-menu {flex-direction:row;height:100%;}
	.header-in{height:100%}
}

/*834px以下*/
@media screen and (max-width: 834px){
    main.main{padding:0!important;}/*必要：モバイルの両端の余白を取り除く*/
   table th, table td{font-size:1rem;}	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.logo-header img{max-width:280px!important;}
}