/*!
Theme Name: mandk-osaka
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mandk-osaka
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

mandk-osaka is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Reset */
ul,ol { list-style: none; }
img {
	border:0;
	text-align: center;
}
img{ max-width:100%; height:auto;}

/* Common */
* {
	margin:0;
	border:0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	box-sizing:border-box;
	 line-height:150%;
}
html { height:100%;margin:0; padding:0; font-size:10px;}
body {
	margin: 0 auto;
	padding:0;
	text-align:left;
	line-height:170%;
	font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.0rem;
	color:#414447;
	background:#FFFFFF;
	letter-spacing: 1px;
}
a{ color:inherit; text-decoration:none;}
a:hover{ text-decoration:underline;}
a:active{color:inherit;}
.clearboth { padding: 0; clear:both; }
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;  overflow: hidden;/* 隙間対応 */
  font-size: 0.1em;/* 隙間対応 */
  line-height: 0;/* 隙間対応 */
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}


header{ display:flex; justify-content:space-between; flex-wrap:wrap; margin:0; padding:40px 40px 0 40px; position:absolute; top:0; height:105px; width:100%; z-index:20000; }
header h1{ display:block; margin:0; padding:0; width:100%; max-width:360px; }
header #gnav{ display:block; margin:0; padding:0; }
header #gnav ul{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0; padding:10px 0 0 0; }
header #gnav ul li{ display:block; margin:0 40px 0 0; padding:0; }
header #gnav ul li:last-of-type{ display:block; margin:0; padding:0; }
header #gnav ul li a{ display:block; margin:0; padding:0; font-size:1.6rem; color:#FFFFFF; }

	@media (max-width: 768px){
	header{ display:flex; justify-content:space-between; flex-wrap:wrap; margin:0; padding:40px 40px 0 40px; position:absolute; top:0; height:105px; width:100%; z-index:20000; }
	header h1{ display:block; margin:0; padding:0; width:100%; max-width:270px; }
	header #gnav{ display:block; margin:0; padding:0; }
	header #gnav ul{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0; padding:10px 0 0 0; }
	header #gnav ul li{ display:block; margin:0 40px 0 0; padding:0; }
	header #gnav ul li:last-of-type{ display:block; margin:0; padding:0; }
	header #gnav ul li a{ display:block; margin:0; padding:0; font-size:1.6rem; color:#FFFFFF; }
	}

/* ハンバーガーボタン（デフォは非表示＝PC用） */
.hamburger{
  display:none;
  position:absolute;
  right:16px; top:24px;
  width:40px; height:40px;
  border:0; background:transparent; padding:0; cursor:pointer;
  z-index:20002; /* header(20000)より上 */
}
.hamburger span{
  display:block; width:24px; height:2px; margin:6px auto;
  background:#fff; transition:transform .2s ease, opacity .2s ease;
}

/* 開いたときのバツ印 */
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* 裏幕 */
.gnav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:20000; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.gnav-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* ====== スマホ幅でナビをパネル化 ====== */
@media (max-width: 960px){
  /* 既存ヘッダの内側余白を少し詰める（任意） */
  header{ padding:20px 16px 0 16px; height:auto; }

  /* ハンバーガー表示 */
  .hamburger{ display:block; }

  /* gnav を右スライドのパネルに */
  header #gnav{
    position:fixed; top:0; right:0; height:100vh; width:min(84vw, 360px);
    background:rgba(0,0,0,.92);
    transform:translateX(100%); transition:transform .25s ease;
    z-index:20001; padding:96px 24px 32px; /* ロゴ/ボタン分の余白 */
  }
  header #gnav.is-open{ transform:translateX(0); }

  /* 中のリストを縦並びに */
  header #gnav ul{
    display:flex; flex-direction:column; gap:16px;
    margin:0; padding:0;
  }
  header #gnav ul li{ margin:0; }
  header #gnav ul li a{
    display:block; padding:10px 0; font-size:1.8rem; color:#fff;
  }
}

#Title { margin:0 auto; padding:100px 0 0 0; width:100%;  height:200px; box-sizing:border-box; background:#222f3a;  }
#TitleInner { margin:0 auto; padding:60px 0 0 0; width:100%; max-width:1200px; height:220px; box-sizing:border-box; background: url(assets/img/bg_title01.jpg) no-repeat top center; position:relative;  }
#TitleInner2 { margin:0 auto; padding:60px 0 0 0; width:100%; max-width:1200px; height:220px; box-sizing:border-box; background: url(assets/img/bg_title01.jpg) no-repeat top center; position:relative;  }
#Title h2{ display:block; margin:0 0 100px 0; padding:0; font-size:8.0rem; line-height:8.0rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center; color:#FFFFFF;text-shadow: #222f3a 1px 0 10px;}
#Title h2 span{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; color:#FFFFFF;text-shadow: #222f3a 1px 0 10px;}
	@media (max-width: 1192px){
	#Title { margin:0 auto; padding:100px 0 0 0; width:100%;  height:200px; box-sizing:border-box; background:#222f3a;  }
	#TitleInner { margin:0 auto; padding:40px 0 0 0; width:100%; max-width:1200px; height:160px; box-sizing:border-box; background: url(assets/img/bg_title01.jpg) no-repeat top center; position:relative;  }
	#TitleInner2 { margin:0 auto; padding:40px 0 0 0; width:100%; max-width:1200px; height:160px; box-sizing:border-box; background: url(assets/img/bg_title01.jpg) no-repeat top center; position:relative;  }
	#Title h2{ display:block; margin:0 0 20px 0; padding:0; font-size:5.0rem; line-height:5.0rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center; color:#FFFFFF;text-shadow: #222f3a 1px 0 10px;}
	#Title h2 span{ display:block; margin:0; padding:0; font-size:1.7rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; color:#FFFFFF;text-shadow: #222f3a 1px 0 10px;}
	}


/* Splash */  
#Splash { margin:0; padding:0; width:100%; max-height:100vh; overflow:hidden; position:relative;box-sizing:border-box; }
#Splash ul{ padding:0 ; height:auto; position:relative; }
#Splash ul li{ margin:0; padding:0; box-sizing:border-box; }
#Splash ul li img{ width:100%; height:auto;}

#BlockTopics{ display:flex; justify-content:flex-start; flex-wrap:wrap; position:absolute; bottom:30px; left:30px; width:100%; max-width:710px; background:#FFFFFF; border-radius:5px; padding:0;}
#BlockTopics h3{  font-size:1.4rem; margin: 0 15px 0 0; padding:20px 0 20px 20px; line-height: 1.9; color:#55a8e5;font-family: "Marcellus", serif; font-weight: 400; width:90px;  }
#BlockTopics ul { display:block; margin:0; padding:20px 0; border-right:1px solid #CCCCCC; width:500px; }
#BlockTopics ul li{  font-size:1.4rem; margin: 0; line-height: 1.9;  }
#BlockTopics a.list{ display:flex; justify-content:center; align-items:center; font-size:1.4rem; margin: 0; line-height: 1.9; width:100px; margin-left:-5px;  background: url(assets/img/arrow02.png) no-repeat center right 10px; }
	@media (max-width: 1192px){
	#BlockTopics{ display:flex; justify-content:flex-start; flex-wrap:wrap; position:relative; bottom:auto; left:auto; width:100%; max-width:710px; background:#FFFFFF; border-radius:5px; padding:20px 20px;}
	#BlockTopics h3{  font-size:1.4rem; margin: 0; padding:0; line-height: 1.9; color:#55a8e5;font-family: "Marcellus", serif; font-weight: 400; width:90px;  }
	#BlockTopics ul { display:block; margin:0 0 10px 0; padding:0; border-right:0; width:100%; max-width:500px; }
	#BlockTopics ul li{  font-size:1.4rem; margin: 0; line-height: 1.9;  }
	#BlockTopics a.list{ display:flex; justify-content:center; align-items:center; font-size:1.4rem; margin: 0; margin-left: auto; line-height: 1.9; width:100px;   background: url(assets/img/arrow02.png) no-repeat center right 10px; border:1px solid #CCC; }
	}

/* Contents */  
#Contents { margin:0; padding:0; width:100%; box-sizing:border-box; background:#EEF2F5 url(assets/img/bg_top.png) no-repeat top center; background-size:cover; }

#Section_TopCopy{ display:block; margin:0 auto; padding:200px 0 200px 0; width:100%; max-width:1192px;}
#Section_TopCopy h2{ display:block; margin:0 0 100px 0; padding:0; font-size:4.2rem; line-height:9.2rem; text-align:left; font-weight:normal;}
#Section_TopCopy p{ display:block; margin:0; margin-left:auto; padding:0; font-size:1.6rem; line-height:4.0rem; text-align:left; font-weight:normal; width:100%; max-width:800px;}
	@media (max-width: 1192px){
	#Section_TopCopy{ display:block; margin:0 auto; padding:50px 20px 50px 20px; width:100%; max-width:1192px;}
	#Section_TopCopy h2{ display:block; margin:0 0 30px 0; padding:0; font-size:3.0rem; line-height:5.0rem; text-align:left; font-weight:normal;}
	#Section_TopCopy p{ display:block; margin:0; margin-left:auto; padding:0; font-size:1.6rem; line-height:3.2rem; text-align:left; font-weight:normal; width:100%; max-width:800px;}
	}

#Section_Work{ display:block; margin:0 auto; padding:100px 0 0 0; width:100%;}
#Section_Work h3{ display:block; margin:0 0 100px 0; padding:0; font-size:8.0rem; line-height:8.0rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center;}
#Section_Work h3 span{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; color:#55a8e5;}
	@media (max-width: 1192px){
	#Section_Work{ display:block; margin:0 auto; padding:50px 0 0 0; width:100%;}
	#Section_Work h3{ display:block; margin:0 0 50px 0; padding:0; font-size:5.0rem; line-height:5.0rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center;}
	#Section_Work h3 span{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; color:#55a8e5;}
	}

#BlockWork01,
#BlockWork02,
#BlockWork03{
  --img-w: 72%;                           
  --img-h: clamp(420px, 60vw, 660px);     
  --card-w: clamp(320px, 40vw, 560px);    
  --card-pad: clamp(18px, 2.6vw, 28px);  
  --overlap-x: 14%;                       
  --bleed: clamp(16px, 0, 80px);        
  --radius: 14px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  margin: clamp(36px, 9vw, 140px) 0;
}

#BlockWork01 .img01, #BlockWork02 .img01, #BlockWork03 .img01{
  grid-area: 1 / 1;
  width: var(--img-w);
  height: var(--img-h);
  overflow: hidden;
}
#BlockWork01 .img01, #BlockWork03 .img01{ justify-self: start; }
#BlockWork02 .img01{ justify-self: end; }
#BlockWork01 .img01 img, #BlockWork02 .img01 img, #BlockWork03 .img01 img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

#BlockWork01 .box01, #BlockWork02 .box01, #BlockWork03 .box01{
  grid-area: 1 / 1;
  z-index: 2;
  width: var(--card-w);
}

#BlockWork01 .box01{
  justify-self: end;
  margin-right: var(--bleed);
  transform: translateX(calc(-1 * var(--overlap-x))) translateY(1%);
}
#BlockWork02 .box01{
  justify-self: start;
  margin-left: var(--bleed);
  transform: translateX(var(--overlap-x)) translateY(1%);
}
#BlockWork03 .box01{
  justify-self: end;
  margin-right: var(--bleed);
  transform: translateX(calc(-1 * var(--overlap-x))) translateY(1%);
}


#BlockWork01 .box01,
#BlockWork02 .box01,
#BlockWork03 .box01{
  position: relative;
}

#BlockWork01 h4,
#BlockWork02 h4,
#BlockWork03 h4{
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  line-height: 100%;
  color: #FFFFFF;
  font-size:18.0rem; font-family: "Marcellus", serif; font-weight: 400;
}

#BlockWork01 h4{ right:0; }
#BlockWork02 h4{ left:0; }
#BlockWork03 h4{ right:0; }
#BlockWork01 h4 span,
#BlockWork02 h4 span,
#BlockWork03 h4 span{
  writing-mode: vertical-rl;padding:30px 0 0 0;
  letter-spacing: 0;
  font-size:3.5rem; font-family: "Marcellus", serif; font-weight: 400;
  line-height: 1;
}
.text01{
  background: #EEF2F5;
  border-radius: var(--radius);
  padding: 70px 70px 70px 70px;
	margin:200px 0 0 0;}
#BlockWork01 h5, #BlockWork02 h5, #BlockWork03 h5{
  margin: 0 0 .6em; font-size: 4.0rem; font-weight: normal;  border-top: 2px solid #cccccc;
  padding-top: .4em;
	position:relative;
}
 
#BlockWork01 h5:before, #BlockWork02 h5:before, #BlockWork03 h5:before {
  position: absolute;
  top: -2px;
  width: 20px;
  height: 2px;
  display: block;
  content: "";
  background: #55a8e5;
}
#BlockWork01 .text01 p, #BlockWork02 .text01 p, #BlockWork03 .text01 p{ 
  font-size:1.6rem; margin: 0; line-height: 1.9; 
}

#BlockWork01 .text01 a, #BlockWork02 .text01 a, #BlockWork03 .text01 a{
  display: inline-block; background: url(assets/img/arrow01.png) no-repeat center right;
  font-weight:normal; font-size:1.6rem; min-height:50px; padding:14px 70px 0 0; margin-top:40px;
}

#BlockWork01 .text01 a span, #BlockWork02 .text01 a span, #BlockWork03 .text01 a span{
  display: inline-block; font-weight:normal;  font-size:1.6rem;
}
#BlockWork01 .text01 a span:hover, #BlockWork02 .text01 a span:hover, #BlockWork03 .text01 a span:hover{
  text-decoration:none;
}
#BlockWork01 .text01 a span::after, #BlockWork02 .text01 a span::after, #BlockWork03 .text01 a span::after{
	content: '';
	width: 100%;
	margin-top:4px;
	transition: all 0.3s ease;
	border-bottom: 3px solid #55a8e5;
	display: block;
}
#BlockWork01 .text01 a span:hover:after, #BlockWork02 .text01 a span:hover:after, #BlockWork03 .text01 a span:hover:after {
	width: 100%;
	border-bottom: 3px solid #cccccc;
}

@media (max-width: 768px){	
	#BlockWork01 h4,
	#BlockWork02 h4,
	#BlockWork03 h4{
	  position: relative;
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  margin: 0 0 0 20px;
	  line-height: 100%;
	  color: #FFFFFF;
	  font-size:18.0rem; font-family: "Marcellus", serif; font-weight: 400;
	}

	#BlockWork01 h4 span,
	#BlockWork02 h4 span,
	#BlockWork03 h4 span{
	  writing-mode: vertical-rl;padding:30px 0 0 0;
	  letter-spacing: 0;
	  font-size:3.5rem; font-family: "Marcellus", serif; font-weight: 400;
	  line-height: 1;
	}
	
  #BlockWork01, #BlockWork02, #BlockWork03{ --img-w: 100%; }
  #BlockWork01 .box01, #BlockWork02 .box01, #BlockWork03 .box01{
    grid-area: auto; justify-self: stretch; width: auto;
    margin: 0 var(--bleed); transform: none;
  }
	.text01{
	  background: #EEF2F5;
	  border-radius: var(--radius);
	  padding: 20px 20px 70px 20px;
		margin:0;}
#BlockWork01 h5, #BlockWork02 h5, #BlockWork03 h5{
  margin: 0 0 .6em; font-size: 3.4rem; font-weight: normal;  border-top: 2px solid #cccccc;
  padding-top: .4em;
	position:relative;
}
	
}



#Section_Company{ display:block; margin:0 auto; padding:0 0 280px 0; width:100%; background:#eff2f4 url(assets/img/bg_company.jpg) no-repeat bottom center; }
#Section_Company h3{ display:block; margin:0 0 100px 0; padding:0; font-size:8.0rem; line-height:8.0rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center;}
#Section_Company h3 span{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; color:#55a8e5;}
	@media (max-width: 1192px){
	#Section_Company{ display:block; margin:0 auto; padding:0 0 140px 0; width:100%; background:#eff2f4 url(assets/img/bg_company.jpg) no-repeat bottom center; }
	#Section_Company h3{ display:block; margin:0 0 50px 0; padding:0; font-size:5.0rem; line-height:5.0rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center;}
	#Section_Company h3 span{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; color:#55a8e5;}
	}

#BlockCompany{ display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 auto; padding:60px; width:100%; max-width:1200px; background:#FFFFFF; border-radius:20px;}
#BlockCompanyL{ display:block; margin:0; padding:0; width:100%; max-width:500px;}
#BlockCompany dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 30px 0; padding:0 0 30px 0;border-bottom: 2px solid #cccccc; position:relative;}
#BlockCompany dl dt{ display:block; margin:0; padding:0; font-size:1.6rem; line-height:100%; font-weight:normal; width:90px;}
#BlockCompany dl dd{ display:block; margin:0; padding:0 10px 0 30px; font-size:1.6rem; line-height:150%; font-weight:normal; width:calc(100% - 90px)}
#BlockCompany dl:after {
  position: absolute;
  bottom: -2px;
  width: 90px;
  height: 2px;
  display: block;
  content: "";
  background: #55a8e5;
}
	@media (max-width: 1192px){
	#BlockCompany{ display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 auto; padding:60px 20px; width:100%; max-width:1200px; background:#FFFFFF; border-radius:20px;}
	#BlockCompanyL{ display:block; margin:0; padding:0; width:100%; max-width:500px;}
	#BlockCompany dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 30px 0; padding:0 0 30px 0;border-bottom: 2px solid #cccccc; position:relative;}
	#BlockCompany dl dt{ display:block; margin:0; padding:0; font-size:1.6rem; line-height:100%; font-weight:normal; width:90px;}
	#BlockCompany dl dd{ display:block; margin:0; padding:0 10px 0 30px; font-size:1.6rem; line-height:150%; font-weight:normal; width:calc(100% - 90px)}
	#BlockCompany dl:after {
	  position: absolute;
	  bottom: -2px;
	  width: 90px;
	  height: 2px;
	  display: block;
	  content: "";
	  background: #55a8e5;
	}
	}


#Section_TopicsList{ display:block; margin:0 auto; padding:200px 0 200px 0; width:100%; max-width:1200px;}
#Section_TopicsList p{ display:block; margin:0;padding:0; font-size:1.6rem; line-height:3.2rem; text-align:center; font-weight:normal;}
#TopicsList{ display:block; margin:0 auto; padding:40px 0; width:100%; max-width:1200px;}
#TopicsList dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 20px 0; padding:0 0 14px 0; box-sizing:border-box; border-bottom: 3px solid #cccccc; position:relative; }
#TopicsList dl dt{ display:block; margin:0; padding:0 10px; box-sizing:border-box; font-size:1.6rem;}
#TopicsList dl dd{ display:block; margin:0 0 0 20px; padding:0; box-sizing:border-box; font-size:1.6rem;}
#TopicsList dl:after {
  position: absolute;
  bottom: -2px;
  width: 120px;
  height: 2px;
  display: block;
  content: "";
  background: #55a8e5;
}
	@media (max-width: 1200px){
	#Section_TopicsList{ display:block; margin:0 auto; padding:150px 20px 50px 20px; width:100%; max-width:1200px;}
	#Section_TopicsList p{ display:block; margin:0;padding:0; font-size:1.6rem; line-height:3.2rem; text-align:center; font-weight:normal;}
	#TopicsList{ display:block; margin:0 auto; padding:40px 0; width:100%; max-width:1200px;}
	#TopicsList dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 20px 0; padding:0 0 14px 0; box-sizing:border-box; border-bottom: 3px solid #cccccc; position:relative; }
	#TopicsList dl dt{ display:block; margin:0; padding:0 10px; box-sizing:border-box; font-size:1.3rem;}
	#TopicsList dl dd{ display:block; margin:0 0 0 20px; padding:0; box-sizing:border-box; font-size:1.3rem;}
	#TopicsList dl:after {
	  position: absolute;
	  bottom: -2px;
	  width: 120px;
	  height: 2px;
	  display: block;
	  content: "";
	  background: #55a8e5;
	}
	}

#Section_TopicsDetail{ display:block; margin:0 auto; padding:200px 0 200px 0; width:100%; max-width:1192px;}
#Section_TopicsDetail h3{ display:block; margin:0 0 20px 0; padding:0; font-size:3.2rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; position:relative; }
#Section_TopicsDetail h3 span{ display:block; margin:0 0 10px 0; padding:0; font-size:1.8rem; line-height:1.8rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center; }
#Section_TopicsDetail h3::after{
	content: '';
	width: 60px;
	margin:0 auto;
	margin-top:8px;
	transition: all 0.3s ease;
	border-bottom: 3px solid #55a8e5;
	display: block;
}
#TopicsDetail{ display:block; margin:0 auto; padding:40px 0; width:100%; max-width:800px; font-size:1.6rem; line-height:4.0rem; text-align:left; font-weight:normal;}
#TopicsDetail p{ display:block; margin:0;padding:0; font-size:1.6rem; line-height:4.0rem; text-align:left; font-weight:normal;}

	@media (max-width: 1200px){
	#Section_TopicsDetail{ display:block; margin:0 auto; padding:150px 20px 50px 20px; width:100%; max-width:1192px;}
	#Section_TopicsDetail h3{ display:block; margin:0 0 20px 0; padding:0; font-size:2.2rem; line-height:3.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; position:relative; }
	#Section_TopicsDetail h3 span{ display:block; margin:0 0 10px 0; padding:0; font-size:1.4rem; line-height:1.4rem; text-align:center; font-family: "Marcellus", serif; font-weight: 400; text-align:center; }
	#Section_TopicsDetail h3::after{
		content: '';
		width: 60px;
		margin:0 auto;
		margin-top:8px;
		transition: all 0.3s ease;
		border-bottom: 3px solid #55a8e5;
		display: block;
	}
	#TopicsDetail{ display:block; margin:0 auto; padding:40px 0; width:100%; max-width:800px; font-size:1.6rem; line-height:4.0rem; text-align:left; font-weight:normal;}
	#TopicsDetail p{ display:block; margin:0;padding:0; font-size:1.4rem; line-height:2.6rem; text-align:left; font-weight:normal;}
	}


#Section_ProductList{ display:block; margin:0 auto; padding:200px 0 200px 0; width:100%; max-width:1200px;}
#Section_ProductList p{ display:block; margin:0;padding:0; font-size:1.6rem; line-height:3.2rem; text-align:center; font-weight:normal;}
#ProductList{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; padding:40px 0; width:100%; max-width:1200px;}
#ProductList dl{ display:block; margin:0 10px; padding:0; width:100%; max-width:380px;}
#ProductList a{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center;  font-weight: normal; text-align:center; position:relative; }
#ProductList a:hover{ text-decoration:none; }
#ProductList a::after{
	content: '';
	width: 40px;
	margin:0 auto;
	margin-top:8px;
	transition: all 0.5s ease;
	border-bottom: 3px solid #55a8e5;
	display: block;
}
#ProductList a:hover:after {
	width: 80%;
	border-bottom: 3px solid #55a8e5;
}
	@media (max-width: 1200px){
	#Section_ProductList{ display:block; margin:0 auto; padding:150px 20px 50px 20px; width:100%; max-width:1200px;}
	#Section_ProductList p{ display:block; margin:0;padding:0; font-size:1.6rem; line-height:3.2rem; text-align:center; font-weight:normal;}
	#ProductList{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; padding:40px 0; width:100%; max-width:1200px; gap:20px 20px;}
	#ProductList dl{ display:block; margin:0; padding:0; width:100%; max-width:380px;}
	#ProductList a{ display:block; margin:0; padding:0; font-size:2.0rem; line-height:4.2rem; text-align:center;  font-weight: normal; text-align:center; position:relative; }
	#ProductList a:hover{ text-decoration:none; }
	#ProductList a::after{
		content: '';
		width: 40px;
		margin:0 auto;
		margin-top:8px;
		transition: all 0.5s ease;
		border-bottom: 3px solid #55a8e5;
		display: block;
	}
	#ProductList a:hover:after {
		width: 80%;
		border-bottom: 3px solid #55a8e5;
	}
	}


#Section_ProductDetail{ display:block; margin:0 auto; padding:200px 0 200px 0; width:100%; max-width:1192px;}
#Section_ProductDetail h3{ display:block; margin:0 0 20px 0; padding:0; font-size:3.4rem; line-height:4.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; position:relative; }
#Section_ProductDetail h3::after{
	content: '';
	width: 60px;
	margin:0 auto;
	margin-top:8px;
	transition: all 0.3s ease;
	border-bottom: 3px solid #55a8e5;
	display: block;
}
#Section_ProductDetail p{ display:block; margin:0;padding:0; font-size:1.6rem; line-height:4.0rem; text-align:left; font-weight:normal;}
#ProductGallery{ display:block; margin:0 auto; padding:40px 0; width:100%; max-width:800px;}
	@media (max-width: 1192px){
	#Section_ProductDetail{ display:block; margin:0 auto; padding:150px 20px 50px 20px; width:100%; max-width:1192px;}
	#Section_ProductDetail h3{ display:block; margin:0 0 20px 0; padding:0; font-size:2.8rem; line-height:3.2rem; text-align:center; font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align:center; position:relative; }
	#Section_ProductDetail h3::after{
		content: '';
		width: 60px;
		margin:0 auto;
		margin-top:8px;
		transition: all 0.3s ease;
		border-bottom: 3px solid #55a8e5;
		display: block;
	}
	#Section_ProductDetail p{ display:block; margin:0;padding:0; font-size:1.4rem; line-height:2.6rem; text-align:left; font-weight:normal;}
	#ProductGallery{ display:block; margin:0 auto; padding:40px 0; width:100%; max-width:800px;}
	}


.acf-slick{ max-width:800px; margin:0 auto; }
.acf-slick .slider-for{ position:relative; }
.acf-slick .slider-for img{ width:100%; height:auto; display:block; }

.acf-slick .slider-nav{ margin-top:10px; }
.acf-slick .slider-nav img{ width:100%; height:auto; display:block; opacity:.6; cursor:pointer; }
.acf-slick .slider-nav img.slick-current{ opacity:1; }

.acf-slick .slider-for .slick-prev,
.acf-slick .slider-for .slick-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid;
  background:rgba(0,0,0,.4); border:0; border-radius:9999px;
  color:#fff; font-size:22px; line-height:1; z-index:5;
}
.acf-slick .slider-for .slick-prev{ left:8px; }
.acf-slick .slider-for .slick-next{ right:8px; }
.acf-slick .slider-for .slick-prev:before,
.acf-slick .slider-for .slick-next:before{ content:''; }


footer{ display:block; margin:0; padding:0;}
#BlockFooter{ display:flex; justify-content:flex-start; flex-wrap:wrap; width:100%; max-width:840px; margin:0 auto; padding:140px 0;}

#BlockFooterL{ display:flex; justify-content:flex-start; align-items:center; width:100%; max-width:420px; margin:0; padding:0; border-right:1px solid #CCCCCC;}
#BlockFooterR{ display:flex; justify-content:flex-start; align-items:center; width:100%; max-width:420px; margin:0; padding:0 0 0 60px;}

#BlockFooterL h3{ display:block; margin:0; padding:0 0 0 50px; font-size:4.8rem; font-weight:normal; line-height:100%; letter-spacing:2px; background: url(assets/img/icon_tel.png) no-repeat top 30px left; }
#BlockFooterL  p{  font-size:1.6rem; margin: 0; line-height: 1.9;  }

.copy{ display:block; margin:0; padding:30px 0; width:100%; background:#222f3a; color:#FFFFFF; font-size:1.2rem; font-weight:normal; text-align:center;}

	@media (max-width: 840px){
	footer{ display:block; margin:0; padding:0;}
	#BlockFooter{ display:block; width:100%; max-width:840px; margin:0 auto; padding:40px 20px;}

	#BlockFooterL{ display:block; width:100%; max-width:420px; margin:0 0 20px 0; padding:0; border-right:0; text-align:center;}
	#BlockFooterR{ display:flex; justify-content:flex-start; align-items:center; width:100%; max-width:420px; margin:0; padding:0;}

	#BlockFooterL h3{ display:block; margin:0; padding:0 0 0 40px; font-size:3.4rem; font-weight:normal; line-height:100%; letter-spacing:2px; background: url(assets/img/icon_tel.png) no-repeat top 20px left; }
	#BlockFooterL  p{  font-size:1.2rem; margin: 0; line-height: 1.9;  }

	.copy{ display:block; margin:0; padding:30px 0; width:100%; background:#222f3a; color:#FFFFFF; font-size:1.1rem; font-weight:normal; text-align:center;}
	}