@charset "UTF-8";
/*
Theme Name: imagine
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: Imagine there's no heaven
Version: 1.0.0
License: GNU General Public License v2 or later
*/

/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

テキストの書式設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */
/*--------------------------------------------------------------
最大幅設定
--------------------------------------------------------------*/
/* .grid-container {max-width:67.5rem;} */
.grid-container {max-width:80rem;} /* 1280px */
#header6 {max-width:105rem;padding:0;} /* 1680px */

/*--------------------------------------------------------------
サイトの幅制限(hero以外の全セクションに有効)
--------------------------------------------------------------*/
/* section:not(.hero) {max-width:1500px; margin-left:auto; margin-right:auto;} */

/*--------------------------------------------------------------
テキスト基本設定
--------------------------------------------------------------*/
* {margin:0;padding:0;}
/* 標準フォントサイズ */
@media (max-width:640px) {:root {font-size:14px;}}
@media (min-width:641px) {:root {font-size:16px;}}
body {
	/* background-image:linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)), url(images/bg_base.png); */
	 font-size:1rem;
	/* font-family: Arial, Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif; */
	 font-family: YakuHanJP, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	 font-weight:500;
	 color:RGBA(55,56,56,1);word-break:break-word;
/*	 
	 font-feature-settings: "palt" 1;
	 -webkit-font-smoothing: subpixel-antialiased; */
	}
/*	
h2,h3,h4,h5,h6 {
	font-family: YakuHanJP, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
*/

/*  行間設定 */
p,ul,ol,dl,th,td,body {line-height:1.5; /* font-feature-settings:"pkna" 1; */}
/*  アイコンフォント */
/* @font-face {
	font-family: 'Font Awesome 5 Brands';
	font-style: normal;
	font-weight: 400;
	src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/webfonts/fa-brands-400.woff2") format("woff2");
	font-display: swap;
 }
@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/webfonts/fa-solid-900.woff2") format("woff2");
	font-display: swap;
 }

@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 400;
	src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/webfonts/fa-regular-400.woff2") format("woff2"),
	font-display: swap;
 } */

/*--------------------------------------------------------------
Hタグ
--------------------------------------------------------------*/
h2,h3,h4,h5,h6 {margin:0.5em 0;padding:0;}
h3,h4,h5,h6 {font-weight:bold;font-weight:700;}
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {margin-top:1em}
/* h2,h3,h4,h5 {font-family:serif;} */
h1 {font-size:2rem;}		/* 32px */
h1.title-logo {margin:0;line-height:0;} 
h2 {font-size:1.5rem;}		/* 24px */
h3 {font-size:1.25rem;}		/* 20px */
h4 {font-size:1.125rem;}	/* 18px */
h5 {font-size:1rem;}		/* 16px */
h6 {font-size:0.875rem;}	/* 14px */

/*--------------------------------------------------------------
本文
--------------------------------------------------------------*/ 
.post {font-size:1rem;}		/* 16px */
/* p {margin:0 0.25rem 0.5rem; padding:0;} */
p {margin:0 0 1.5rem; padding:0;}
.tx-small {font-size:0.75rem;}	/* 12px */
.tx-large {font-size:1.125rem;}	/* 18px */
i {font-style:normal;}
.meta,#breadcrumb, #breadcrumb a,#breadcrumb i {font-size:0.75rem;}	/* 18px */

/*--------------------------------------------------------------
リード文
--------------------------------------------------------------*/ 
.lead p,p.lead {font-size:1.063rem; margin-left:0;margin-right:0;font-family:serif;font-weight:bold;}

/*--------------------------------------------------------------
UL OL DL
--------------------------------------------------------------*/
ul,ol {list-style: none;margin: 0;padding: 0;}
ul:not([class]) {margin:0 0.25rem 1.5rem;list-style-type:none;}
ul:not([class]) li {padding-left:1em;text-indent:-0.7em;}
ul:not([class]) li:before {font-family: "Font Awesome 5 pro";font-weight: 900;content: "\f0da";margin-right:5px;}
ul.yoko li {float:left; margin-right:0.5rem;}
ol {margin:0 0.5rem 0.5rem 2.1rem;}
dl{overflow:hidden;}
dt,dd{display:block; border-top:1px solid #FFF; padding:0.5em 0; margin:0;}
dt {float:left; clear:left; width:25%;} 
dd {float:left;width:75%;}
@media (max-width:640px) {.rps dt {width:100%;margin-bottom:0.1rem;} .rps dd {width:100%;margin-bottom:0.5rem;} }

/*--------------------------------------------------------------
リンク
--------------------------------------------------------------*/
a {outline:none;}
a:focus,a:hover{text-decoration:underline;}
a:focus, *:focus {outline:none;}

/*--------------------------------------------------------------
ボタン
--------------------------------------------------------------*/
.button:not(.hollow) {background:#666;}
.button:not(.hollow):hover {background:#ccc;}
.button{padding:.85em 1em;margin:0 0 0.5rem 0;line-height:1.4;text-decoration:none;}
.button:focus,.button:hover{box-shadow:0 6px 3px -3px rgba(0, 0, 0, 0.1);transform:translateY(-0.1875em);transition:all .5s;}
.button.rounded{border-radius:50px;}
.button,.button:focus,.button:hover,.button:visited{color:#fff;}
.button.hollow:visited{color:inherit;}
.button i {color:#fff;margin-right:5px;}


/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

ヘッダーの設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */

.title-logo img{height:auto;max-height:40px; margin:10px auto;}
@media (max-width:640px) {
.title-logo {text-align:left;}
.title-logo img{margin:0 auto;padding:0;line-height:1;width:200px;height:auto;}
}
.second-menu-area {padding-top:0.5rem;}
.sticky {height:52px; box-shadow:0 2px 4px rgba(0,0,0,0.3);}

.contact-area {display:flex;align-items:center;justify-content:flex-end;}
.contact-phone {text-align:center;font-size:0.8rem;font-weight:bold;margin:0 1rem;line-height:1;}
.contact-phone span {font-size:1.8rem;}
.contact-phone img {width:240px;margin-bottom:0;}
.contact-form {font-size:1.125rem;font-weight:bold;}
.button.contact-form {padding:0.4rem 1rem;margin-bottom:0;border-radius:4px;}

#header0 {display:none;}

#header1 {display:flex; align-items:center; flex-wrap:wrap;}
#header1 .right-area {margin-top:0; margin-left:auto;}
#header1 nav {width:100%;}
#header8 {display:flex; align-items:center; flex-wrap:wrap;}
#header8 .right-area {margin-top:0; margin-left:auto;}
#header8 nav {width:100%;}


#header2 {display:flex; align-items:center; flex-wrap:wrap;}
#header2 .right-area {margin-top:0;margin-left:auto;}

#header7 {display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap;}
#header7 {position:fixed;bottom:0; background:#fcfcfc;width:100%;text-align:center;line-height:1;color:#282f49;border-top:1px solid #ededed; height:52px;z-index:90;}
#header7 i {font-size:1.5rem;}
#header7 span {font-size:0.625rem;}
#header7 div {width:18%;}

#header3 {display:flex; align-items:center; justify-content:space-between;}
#header3 nav {display:none;}


#header4 {display:flex; align-items:center; flex-wrap:wrap;}
#header4 .right-area {margin-top:0;margin-left:auto;}

#header5 .right-area {margin-top:0;margin-left:auto;}
#header5 h1 {text-align:center;margin:0;}
#header5 nav {display:flex;justify-content:center;}

/*
#header6 {display:flex; align-items:center; flex-wrap:wrap;}
#header6 .right-area {margin-top:0;margin-left:auto;}
*/

/* お問い合わせとハンバーガー重なり回避 */
#header3 .right-area {margin-right:50px;}

/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

グローバルナビの設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */

#header1 .main-menu {margin-top:1rem;}
#header1 .main-menu ul {margin:0; display:flex;align-items:stretch;}
#header1 .main-menu ul li {flex:1; padding:0;}
#header1 .main-menu ul li a {padding:0.5rem 1rem 0.9rem;text-align:center; display:block; position:relative; text-decoration:none; font-weight:bold;min-width:7rem;}
#header1 .main-menu ul li a:hover {transition:all 0.6s ease;}
#header1 .main-menu ul i {margin-bottom:5px;}
/* 前後に境界線 */
#header1 .main-menu ul li {border-right:1px solid #eee;}
#header1 .main-menu ul li:first-child {border-left:1px solid #eee;}
/* ホバー時下線エフェクト */
#header1 .main-menu li {position:relative;overflow:hidden;transition:.3s;}
#header1 .main-menu li:after {position:absolute;transition:.3s;content:'';width:0;left:50%;bottom:0;height:5px;}
#header1 .main-menu li:hover {cursor:pointer;}
#header1 .main-menu li:hover:after {width:100%;left:0;}
#header8 .dropdown-pane {width:800px;border:1px solid #ccc; background:#eee;}
#header8 .dropdown-pane p {line-height:1.2;} 
#header8 .main-menu {margin-top:1rem;}
#header8 .main-menu ul {margin:0; display:flex;align-items:stretch;}
#header8 .main-menu ul li {flex:1; padding:0;}
#header8 .main-menu ul li a {padding:0.5rem 1rem 0.9rem;text-align:center; display:block; position:relative; text-decoration:none; font-weight:bold;min-width:7rem;}
#header8 .main-menu ul li a:hover {transition:all 0.6s ease;}
#header8 .main-menu ul i {margin-bottom:5px;}
/* 前後に境界線 */
#header8 .main-menu ul li {border-right:1px solid #ccc;}
#header8 .main-menu ul li:first-child {border-left:1px solid #ccc;}
/* ホバー時下線エフェクト */
#header8 .main-menu li {position:relative;overflow:hidden;transition:.3s;}
#header8 .main-menu li:after {position:absolute;transition:.3s;content:'';width:0;left:50%;bottom:0;height:5px;}
#header8 .main-menu li:hover {cursor:pointer;}
#header8 .main-menu li:hover:after {width:100%;left:0;}
#header2 .main-menu ul {margin:0.5rem 0; display:flex;align-items:stretch; list-style-type:none;}
#header2 .main-menu ul li {flex:1;}
#header2 .main-menu ul li a {padding:0 0.5rem;text-decoration:none; font-weight:400; white-space:nowrap; color:#333;}

.main-menu-vertical ul {display:block;}
#header6 .title-logo a{ padding:2rem 0; display:block; transition:all 0.4s ease;}
#header6 .title-logo a:hover{ opacity:0.7; transition:all 0.4s ease;}
#header6 #sidebar { width:300px; box-shadow:1px 2px 10px rgba(100, 100, 100, 0.4);}
#header6 #sidebar .side-content{ position:fixed; width:300px; background:#fff; z-index:99; border-radius:0 0 5px 5px;}
#header6 #primary { box-shadow:6px 1px 10px -5px rgba(100, 100, 100, 0.4);}
.main-menu-vertical a { padding:2rem 1rem; border-bottom:1px solid #eee; display:block; color:#ccc; font-weight:bold; text-decoration:none; transition:all 0.4s ease;}
.main-menu-vertical li {position: relative;}
.main-menu-vertical li:first-child { border-top:1px solid #eee;}
.main-menu-vertical a:hover { background:#eee; transition:all 0.4s ease;}
.main-menu-vertical a:after { font-family:"Font Awesome 5 Pro"; content:"\f1b0"; font-weight:400; position:absolute; color:#666; right:0; padding-right:.5rem; transition:all 0.4s ease;}
.main-menu-vertical a:hover:after { transform:rotate(20deg); transition:all 0.4s ease;}
.main-menu ul i {font-size:2rem;}
.main-menu ul span {font-size:0.875rem;}
.main-menu li:after {background:#666;}

/*--------------------------------------------------------------
メガメニュー フィルムコミッション式
--------------------------------------------------------------*/
/* .dropdown-pane {width:1000px;border:1px solid #cdd4dd;}
@media (max-width:1000px) {.dropdown-pane {width:640px;}}
#mega-menu {left:auto !important;right:0 !important;top:0 !important;}
.dropdown-pane p {line-height:1.2;} 
.dropdown-pane section {margin:0;padding:0;}
.dropdown-pane .cards .card figure {height:150px;min-height:120px;max-height:150px;}
.dropdown-pane .cards .card figcaption h4 {font-size:1.125rem;padding:0.5rem;}
.dropdown-pane .cards .card {padding-bottom:0;} */

/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

スマホメニューの設定 一部PCでも使用

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */
/*--------------------------------------------------------------
ハンバーガーボタン
--------------------------------------------------------------*/
.hamberger_line { display: block; vertical-align: middle; cursor: pointer; position: fixed; transform: translateX(0); transition: transform .5s; top: 8px; right: 1rem; z-index: 100; width: 36px; height: 28px;}
.hamberger_line {padding:0;}
.hamberger_line:after { content: ""; display: block; width: 52px; height: 52px; margin-left: -4px; margin-top: -8px;background:#333;position: absolute;top:0;z-index: -1;}
.hamberger_line span { display: inline-block; box-sizing: border-box; position: absolute;transition: all .5s; margin-left: 4px; left: 0; width: 100%; height: 3px; background:#fff;}
.hamberger_line span:nth-of-type(1) 		{top: 0;}
.hamberger_line.open span:nth-of-type(1) 	{transform: translateY(10px) rotate(-45deg);}
.hamberger_line span:nth-of-type(2) 		{top: 10px;}
.hamberger_line.open span:nth-of-type(2) 	{opacity: 0;}
.hamberger_line span:nth-of-type(3) 		{bottom: 4px;}
.hamberger_line.open span:nth-of-type(3) 	{transform: translateY(-10px) rotate(45deg);}
.hamberger_line .text {color:#fff; font-size:0.625rem; text-align: center; background: transparent; margin-top:24px; }
.hamberger_list { position: fixed; top: 0; right: 0; z-index: 10; transform: translateX(250px); transition: all .5s; width: 250px; height: 100%; padding-top: 100px;overflow: auto;background:#eee;}
.hamberger_list.open { transform: translateX(0);}
.hamberger_list {margin-top:0;padding:5rem 0 0 1rem;}
.hamberger_list h2 {text-align: left;}
.hamberger_list li { padding: 5px 10px;margin-bottom: 5px;margin-right:10px;}
.hamberger_list li:before {content:none;}
.hamberger_list ul ul li {padding:5px; margin-left:15px;margin-bottom: 4px;}
.hamberger_list a {text-decoration: none;font-weight: bold;display: block;background:#333333;}
.hamberger_list h2 a{color:#fff;font-size: 1.125rem;line-height: 1.4;}
.hamberger_menu.active .hamberger_line span:nth-of-type(1) 	{transform: translateY(10px) rotate(-45deg);}
.hamberger_menu.active .hamberger_line span:nth-of-type(2) 	{opacity: 0;}
.hamberger_menu.active .hamberger_line span:nth-of-type(3) 	{transform: translateY(-10px) rotate(45deg);}
.hamberger_menu.active .hamberger_list { transform: translateX(0);}
.hamberger_menu.activeopen {display: none;}
/* ハンバーガーメニューを表示する時、背景を固定する */
.scroll-y {overflow-y:scroll;}
.scroll-prevent {height:100%; overflow:hidden;}
/* 固定 */
.fixed {position: fixed;top: 0;padding: 0;width: 100%;z-index: 1000;}

/*--------------------------------------------------------------
オーバーレイナビ
--------------------------------------------------------------*/
nav.overlay-navi-menu {background:RGBA(58, 71, 78,0.8); padding-top:50px; padding-bottom:100px;}
nav.overlay-navi-menu h1 {margin-bottom:10px;}
nav.overlay-navi-menu ul {margin-left:0; list-style-type:none;}
.overlay-navi {position:fixed; width:100%; height:52px; margin:0; background:RGBA(255,255,255, 0.95); box-shadow:0 0 10px rgba(0,0,0,0.6); z-index:30;}
.overlay-navi-wrap {position:relative; width:100%; margin:0 auto;}
nav.overlay-navi-menu ul li a {display:block; color:#fff; text-decoration:none;}

/* 横スクロールメニュー用ヘッダー */
@media (max-width:640px) {
#scroll-navi .logo-area{padding:5px;} 
#scroll-navi + section {margin-top:0;}
.scroll-navi {width:100%; margin:0; background:RGBA(255,255,255, 0.95); box-shadow:0 0 10px rgba(0,0,0,0.6); z-index:50; position:fixed;}
.scroll-navi .logo{height:52px; display:flex; align-items:center; justify-content:center;}
}
.scroll-menu {width:100%; background:#666; overflow-x:auto; overflow-y:hidden;}
.scroll-menu ul {margin:0; list-style:none; display:flex; align-items:center;}
.scroll-menu ul li {text-align:center;}
.scroll-menu ul li a,.scroll-menu ul li a:link,.scroll-menu ul li a:visited {display:inline-block; width:80px; color:#fff; text-decoration:none; padding:1rem 0 0.5rem;}
.scroll-menu ul li a:hover,.scroll-menu ul li a:active {background:#ccc;}
.scroll-menu .mobile-menu i {font-size:1.5rem;}
.scroll-menu .mobile-menu span {font-size:0.625rem;}


/* 0番 シングルページ */
#menu-single .hamberger_line {position:fixed; top:8px; right:20px; z-index:100;}
#menu-single nav.overlay-navi-menu {position:fixed; background:transparent; top:52px; right:7px; height:100vh; text-align:center; z-index:-1; opacity:0; overflow:hidden; transition:1s; padding-top:0;}
#menu-single input[type="checkbox"].on-off + nav.overlay-navi-menu { padding-bottom:0;height:0; overflow:hidden; transition:0.5s;}
#menu-single input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {height:auto;opacity:1;z-index:99;}
#menu-single input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul {opacity:1; pointer-events:auto;}
#menu-single nav.overlay-navi-menu .mobile-menu li {padding:0 3px;}
#menu-single nav.overlay-navi-menu .mobile-menu a {padding:1rem 2rem; color:#333; font-weight:bold; text-decoration:none; transition:all 0.4s ease; text-align:right;background:#fff;font-size:1.5rem;box-shadow:6px 6px #eee;}
#menu-single nav.overlay-navi-menu .mobile-menu a:before {font-family:"Font Awesome 5 Free"; content:"\f13a"; font-weight:900; font-weight:normal; color:#666; right:0; padding-right:.5rem; transition:all 0.4s ease;}
#menu-single nav.overlay-navi-menu .mobile-menu a:hover {background:#eee;}

/* 1番 ドロップダウン */
#menu-dropdown nav.overlay-navi-menu {background:#666; position:fixed; top:52px; width:100%; padding:0; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.6); z-index:29;}
#menu-dropdown input[type="checkbox"].on-off + nav.overlay-navi-menu {height:0; overflow:hidden; transition:0.5s;}
#menu-dropdown input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {height:51.3vh;}
#menu-dropdown nav.overlay-navi-menu ul {padding-left:1rem; padding-right:1rem; width:100%;}
#menu-dropdown nav.overlay-navi-menu li{border-bottom:1px solid #333;}
#menu-dropdown nav.overlay-navi-menu .mobile-menu a{padding:1.5rem 1rem; display:block; color:#fff; font-size:1rem; font-weight:bold; text-decoration:none; transition:all 0.4s ease; text-align:left;}
#menu-dropdown nav.overlay-navi-menu .mobile-menu a:hover {background:#eee;}

/* 8番 ドロップダウンメガメニュー */
#menu-dropdown-mega nav.overlay-navi-menu {background:#fff; position:fixed; top:52px; width:100%; padding:0; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.6); z-index:29;}
#menu-dropdown-mega input[type="checkbox"].on-off + nav.overlay-navi-menu {height:0; overflow:hidden; transition:0.5s;}
#menu-dropdown-mega input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {height:auto; max-height:75vh; overflow:scroll;}
#menu-dropdown-mega nav.overlay-navi-menu ul {padding-left:1rem; padding-right:1rem; width:100%;}
#menu-dropdown-mega nav.overlay-navi-menu li{border-bottom:1px solid #eee;}
#menu-dropdown-mega nav.overlay-navi-menu .mobile-menu a{padding:1rem 1rem; display:block; color:#333; font-size:1rem; text-decoration:none; transition:all 0.4s ease; text-align:left;}
#menu-dropdown-mega nav.overlay-navi-menu .mobile-menu a:hover {background:#eee;}
#menu-dropdown-mega .accordion-menu .submenu li{border-bottom:none; border-top:1px solid #eee;}
#menu-dropdown-mega .accordion-menu .submenu,
#menu-dropdown-mega .accordion-menu li a {margin:0; box-shadow:none; background:transparent;}

/* 3番 右から出てくる */
#menu-rightside nav.overlay-navi-menu {background:#eee; position:fixed; top:0; right:0; width:70%; height:100%; text-align:center; transform:translateX(200%); z-index:99; padding:4rem 1rem 1rem; overflow-x:hidden;}
@media (min-width:641px) {#menu-rightside nav.overlay-navi-menu {background:#eee; width:50%; max-width:400px;}}
#menu-rightside input[type="checkbox"].on-off + nav.overlay-navi-menu {transition:0.5s;}
#menu-rightside input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {transform:translateX(0%);}
#menu-rightside input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul {opacity:1;}
#menu-rightside nav.overlay-navi-menu ul li a {display:inline-block; transform:translateX(200%); transition:transform 1s;}
#menu-rightside input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul li a {transform:translateX(0);}
#menu-rightside nav.overlay-navi-menu .mobile-menu li,#menu-rightside nav.overlay-navi-menu .pc-menu li{border-bottom:1px solid #fff;}
#menu-rightside nav.overlay-navi-menu .mobile-menu li:first-child,#menu-rightside nav.overlay-navi-menu .pc-menu li:first-child {border-top:1px solid #fff;}
#menu-rightside nav.overlay-navi-menu .mobile-menu a,#menu-rightside nav.overlay-navi-menu .pc-menu a{padding:1rem 1rem; display:block; color:#666; font-weight:bold; text-decoration:none; transition:all 0.4s ease; text-align:left;}
#menu-rightside nav.overlay-navi-menu .mobile-menu a i {font-size:1.75rem; margin-right:0.25rem; color:#666;}
#menu-rightside nav.overlay-navi-menu .pc-menu a i {font-size:1.75rem; margin-right:0.25rem; color:#666;}
#menu-rightside nav.overlay-navi-menu .mobile-menu a:hover,
#menu-rightside nav.overlay-navi-menu .pc-menu a:hover {background:#eee;}

/* 6番 左から出てくる */
#menu-leftside .hamberger_line {right:auto; left:4px;}
#menu-leftside nav.overlay-navi-menu {background:#eee; position:fixed; top:0; width:70%; height:100%; text-align:center; transform:translateX(-100%); z-index:99; padding:4rem 2rem 1rem; overflow-x:hidden; overflow-y:scroll;}
#menu-leftside input[type="checkbox"].on-off + nav.overlay-navi-menu {transition:0.5s;}
#menu-leftside input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {transform:translateX(0);}
#menu-leftside input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul {opacity:1;}
#menu-leftside input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul li a {transform:translateX(0);}
#menu-leftside nav.overlay-navi-menu ul li a {display:inline-block; transform:translateX(-100%); transition:transform 1s;}
#menu-leftside nav.overlay-navi-menu .mobile-menu li{border-left:1px solid #eee;border-right:1px solid #eee;border-bottom:1px solid #eee;background:#fff;}
#menu-leftside nav.overlay-navi-menu .mobile-menu li:first-child {border-top:1px solid #eee;border-radius:5px 5px 0 0;}
#menu-leftside nav.overlay-navi-menu .mobile-menu li:last-child {border-radius:0 0 5px 5px;}
#menu-leftside nav.overlay-navi-menu .mobile-menu a{padding:1.5rem 1rem; display:block; color:#666; font-weight:bold; text-decoration:none; transition:all 0.4s ease; text-align:left;}
#menu-leftside nav.overlay-navi-menu .mobile-menu a:hover {background:#eee;}
#menu-leftside nav.overlay-navi-menu .mobile-menu li a:after {font-family:"Font Awesome 5 Free"; content:"\f1b0"; font-weight:900; position:absolute; font-weight:normal; color:#333; right:0; padding-right:.5rem; transition:all 0.4s ease;}
#menu-leftside nav.overlay-navi-menu .mobile-menu li a:hover:after {transform:rotate(20deg);}

/* 4番 フワ */
@media (min-width:641px) {.home #menu-fade .overlay-navi {position:fixed; width:100%; height:auto; margin:0 0 30px; background:transparent; box-shadow:none; z-index:30;}}
#menu-fade .hamberger_line {position:fixed; top:8px; right:20px; z-index:100;}
#menu-fade nav.overlay-navi-menu {position:fixed; background:RGBA(238, 238, 238, 0.95); top:0; width:100%; height:100vh; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.6); z-index:-1; opacity:0; overflow:hidden; transition:0.5s;}
@media (min-width:641px) {#menu-fade nav.overlay-navi-menu .container {max-width:600px; margin:0 auto;}}
#menu-fade input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {opacity:1; z-index:99;overflow:scroll;}
#menu-fade input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul {opacity:1; pointer-events:auto;}
#menu-fade nav.overlay-navi-menu .mobile-menu,#menu-fade nav.overlay-navi-menu .pc-menu {padding:0 2rem;}
#menu-fade nav.overlay-navi-menu .mobile-menu li,#menu-fade nav.overlay-navi-menu .pc-menu li{padding:0 3px;}
#menu-fade nav.overlay-navi-menu .mobile-menu li.half,#menu-fade nav.overlay-navi-menu .pc-menu li.half{width:50%; float:left;}
#menu-fade nav.overlay-navi-menu .mobile-menu a,#menu-fade nav.overlay-navi-menu .pc-menu a{padding:1rem 1rem; display:block; color:#666; font-weight:bold; text-decoration:none; transition:all 0.4s ease; text-align:left;position:relative;border:1px solid #666;border-radius:8px;margin-bottom:0.5rem;background:#fff;font-size:1rem;}
#menu-fade nav.overlay-navi-menu .pc-menu a{font-size:1.5rem;}
#menu-fade nav.overlay-navi-menu .mobile-menu a:after,#menu-fade nav.overlay-navi-menu .pc-menu a:after {font-family:"Font Awesome 5 Free"; content:"\f138"; font-weight:900; position:absolute; font-weight:normal; color:#333; right:0; padding-right:.5rem; transition:all 0.4s ease;}
#menu-fade nav.overlay-navi-menu .mobile-menu a:hover,#menu-fade nav.overlay-navi-menu .pc-menu a:hover {background:#eee;}

/* 2番 ボトムフワ */
#menu-bottom nav.overlay-navi-menu .mobile-menu a{padding:1rem 1rem; display:block; color:#fff; font-size:1.25rem; font-weight:bold; text-decoration:none; transition:all 0.4s ease; text-align:center;}
#menu-bottom nav.overlay-navi-menu .mobile-menu a:hover {background:#eee;}
@media (max-width:640px) {#menu-bottom .logo-area{padding:5px;} #menu-bottom + section {margin-top:0;}}
#menu-bottom .hamberger_line {bottom:16px; left:4px; top:auto; z-index:99;}
#menu-bottom .overlay-navi {position:fixed; width:100%; height:auto; margin:0 0 30px; background:transparent; box-shadow:none; z-index:30;}
#menu-bottom nav.overlay-navi-menu {background:RGBA(238, 238, 238, 0.9); position:fixed; bottom:0; width:100%; height:100vh; padding-top:0; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.6); opacity:0; z-index:-1; transition:1s;}
#menu-bottom input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {opacity:1; z-index:80;}
#menu-bottom input[type="checkbox"].on-off + nav.overlay-navi-menu {height:0; overflow:hidden; overflow-y: scroll; transition:0.5s;}
#menu-bottom input[type="checkbox"].on-off:checked + nav.overlay-navi-menu {height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:2rem 0;}
#menu-bottom input[type="checkbox"].on-off:checked + nav.overlay-navi-menu ul {opacity:1; pointer-events:auto; width:90%;}

/* 0番 shy-header */
.shy-header {width:100%;position:fixed;top:0;left:0;right:0;z-index:1;-webkit-transition:all 200ms ease-out;transition:all 200ms ease-out;background:rgba(255,255,255,.8);border-bottom:1px solid #eee;}
@media (max-width:640px) {.shy-header #logo {display:flex;align-items:center;justify-content:center;height:52px;}}
.is-watching {-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);}

/* 2番 ボトムバー仕様 
.overlay-navi-bottom {position:fixed; width:100%; height:52px; margin:0; background:#000; box-shadow:0 0 10px rgba(0,0,0,0.6); bottom:0; z-index:30;}
.overlay-navi-bottom .overlay-navi05-wrap .hamberger_line {position:fixed; top:auto !important; bottom:20px !important; right:15px; z-index:31;}
#sp-menu-bottom {position:fixed; bottom:0;}


/* 2番 下から出てくる
.overlay-navi05-wrap {position:relative; width:100%; height:52px; margin:0 auto; z-index:9999;}
@media screen and (min-width:1024px) {.overlay-navi05-wrap {width:1000px;}}
.overlay-navi05-wrap label {position:absolute; top:11px; right:15px; cursor:pointer;}
.overlay-navi05-wrap label.on-off i {display:block !important; color:#fff; font-size:2em;}
nav.overlay-navi05-menu label {position:absolute; top:20px; left:50%; transform:translateX(-50%); cursor:pointer;}
@media screen and (min-width:1024px) {nav.overlay-navi05-menu label {top:20%;}}
nav.overlay-navi05-menu label:hover {opacity:0.6;}
nav.overlay-navi05-menu label.close i {display:block !important; padding:0; color:#fff; font-size:2em; opacity:0;}
input[type="checkbox"].on-off:checked + nav.overlay-navi05-menu label i {opacity:1;}
nav.overlay-navi05-menu {position:fixed; top:0; width:100%; height:100vh; text-align:center; background:rgba(251, 66, 143, 0.0); z-index:10000;}
input[type="checkbox"].on-off + nav.overlay-navi05-menu {transform:translateY(100%); transition:0.5s;}
input[type="checkbox"].on-off:checked + nav.overlay-navi05-menu {background:rgba(251, 66, 143, 0.8); transform:translateY(0);}
nav.overlay-navi05-menu ul {position:absolute; top:50%; left:50%; width:220px; display:flex; flex-wrap:wrap; transform:translate(-50%,-50%); opacity:0;}
@media screen and (min-width:768px) {nav.overlay-navi05-menu ul {width:600px;}}
input[type="checkbox"].on-off:checked + nav.overlay-navi05-menu ul {opacity:1;}
nav.overlay-navi05-menu ul li {width:50%; padding:8px; transform:rotateY(360deg); transition:1s;}
@media screen and (min-width:768px) {nav.overlay-navi05-menu ul li {width:33.333333%;  padding:10px;}}
input[type="checkbox"].on-off:checked + nav.overlay-navi05-menu ul li {transform:rotateY(0deg);}
nav.overlay-navi05-menu ul li a {display:block; padding:13.5% 0 23%; color:#fff; font-size:1.1em; font-family:'Raleway', sans-serif; text-decoration:none; background:#adadad; border-radius:50%;}
@media screen and (min-width:768px) {nav.overlay-navi05-menu ul li a {padding:20.5% 0 22.5%;  font-size:1.6em;}}
nav.overlay-navi05-menu ul li a i {display:block !important; color:#fff; font-size:2em; line-height:1.2em;}
@media screen and (min-width:768px) {nav.overlay-navi05-menu ul li a i {font-size:2.6em;  line-height:1.1em;}}
nav.overlay-navi05-menu ul li a span {font-size:1em;}
nav.overlay-navi05-menu ul li a:hover {opacity:0.6;}
input[type="checkbox"].on-off ~ .overlay-navi05-main {padding:67px 15px 0;}
@media screen and (min-width:1024px) {input[type="checkbox"].on-off ~ .overlay-navi05-main {padding:82px 0 0;}}
*/

/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

フッターの設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */

/*--------------------------------------------------------------
フッター
--------------------------------------------------------------*/
.snsib {margin: 0 0 1rem;padding: 0;} 
.snsib li:before {content: none;}
.snsib a {color:#fff;}
footer{background:#666;padding: 2rem 1rem;}
footer,footer p {color:#fff;font-size:0.875rem;}
footer h3 {border-bottom: none;}
footer h3:after {content: none;}

/*--------------------------------------------------------------
Copyright
--------------------------------------------------------------*/
#copyright {font-size: inherit;padding: 0;color: inherit;background: transparent;clear: both;}
footer .copy {font-size: 0.75rem;line-height: 1.0;text-align: center;}
footer .copy a {color: inherit;}
footer #thk {display: none;}


/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

スライダーの設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */


/*--------------------------------------------------------------
スライダー
--------------------------------------------------------------*/
@media (min-width:641px) {#slider1 .wpsisac-slide-wrap { max-height:85vh;}}
.slider-area img { margin:0;}
/* スマホの高さ指定撤回 */
.wpsisac-image-slide,.wpsisac-slide-wrap {height:auto;}
.slider-area img{ width:100%;}
.slider-area,#slider5, #slider5 .grid-container { padding:0;}
#slider5 .wpsisac-slick-carousal .wpsisac-image-slide { margin:0;}
#slider5 .wpsisac-slick-carousal.design-6 { margin-bottom:0;}
@media (max-width:640px) {#menu-leftside + main {margin-top: 52px;}}
@media (max-width:640px) {#menu-dropdown-mega + main {margin-top: 52px;}}
@media (max-width:640px) {header + section {margin-top:52px;}}
@media (min-width:641px) {#slider3 {padding-top:80px;}}
@media (max-width:640px) {#slider3 .grid-container { padding-left:0; padding-right:0;} #slider3 .banner_area { padding-left:0.625rem; padding-right:0.625rem;}}
/* 3 バナーエリアの縦位置 */
.banner_area {display:flex; flex-direction:column; align-items:center; justify-content:space-between;}
.banner_area img {margin-bottom:0;}
@media (max-width:640px) {.banner_area {margin-top:20px;}}
@media (min-width: 641px) {#slider4 img { min-height:300px;}}
/* 固定キャッチコピー */
.slider-area {position:relative; z-index:0;}
.slider-area .copy-text { position:absolute; top:50%; left:50%; transform :translate(-50%,-50%); text-align:center; width:80%; font-size:32px; font-weight:bold; color:#fff; text-shadow:1px 1px 2px black;}
@media (max-width:640px) {.slider-area .copy-text { font-size:24px;}}
/* 各スライドのテキスト */
.slider-area .wpsisac-slider-short-content {margin-bottom: 0;}
.slider-area .wpsisac-slide-wrap { max-height:70vh; display:flex; align-items:center;}
.slider-area h2{background: none;}
/* スライダーの明るさ */
.wpsisac-slick-slider.design-2 .wpsisac-image-slide .wpsisac-slide-wrap .wpsisac-slider-overlay {background:rgba(0,0,0,0.1);}

/* subtle slider */
@-webkit-keyframes right {from {-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%);} to {-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%);}}
@keyframes right {from {-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%);} to {-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%);}}
@-webkit-keyframes left {from {-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%);} to {-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg)transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%);}}
@keyframes left {from {-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%);} to {-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%);}}
@-webkit-keyframes down {from {-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%)} to {-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%);}}
@keyframes down {from {-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%);} to {-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%);}}
@-webkit-keyframes up {from {-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%);} to {-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%);}}
@keyframes up {from {-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%);} to {-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%);}}
@-webkit-keyframes out {from {-webkit-transform:scale(1.15);transform:scale(1.15);} to {-webkit-transform:scale(1);transform:scale(1);}}
@keyframes out {from {-webkit-transform:scale(1.15);transform:scale(1.15);} to {-webkit-transform:scale(1);transform:scale(1);}}
@-webkit-keyframes in {from {-webkit-transform:scale(1);transform:scale(1);} to {-webkit-transform:scale(1.15);transform:scale(1.15);}}
@keyframes in {from {-webkit-transform:scale(1);transform:scale(1);} to {-webkit-transform:scale(1.15);transform:scale(1.15);}}
#slides {position:relative;width:0;height:80vh;left:-9999px;}
#slideshow {position:absolute;overflow:hidden;top:0;left:0;right:0;bottom:0;}
#slideshow .slide, #slideshow span, #slideshow .static-content {display:block;position:absolute;top:0;left:0;right:0;bottom:0;}
#slideshow .slide span {background-size:cover;background-position:center;}
#slideshow .slide span.animate.right, #slideshow .slide span.animate.left {left:calc((-4vw + -4vh + -4%)/3);right:calc((-4vw + -4vh + -4%)/3);}
#slideshow .slide span.animate.up, #slideshow .slide span.animate.down {top:calc((-4vw + -4vh + -4%)/3);bottom:calc((-4vw + -4vh + -4%)/3);}
#slideshow span.animate {-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
#slideshow span.animate.right {-webkit-animation-name:right;animation-name:right;}
#slideshow span.animate.left {-webkit-animation-name:left;animation-name:left;}
#slideshow span.animate.up {-webkit-animation-name:up;animation-name:up;}
#slideshow span.animate.down {-webkit-animation-name:down;animation-name:down;}
#slideshow span.animate.in {-webkit-animation-name:in;animation-name:in;}
#slideshow span.animate.out {-webkit-animation-name:out;animation-name:out;}
#slideshow span.animate.paused {-webkit-animation-play-state:paused;animation-play-state:paused;}
@media (max-width:640px) {.slider-area,#slides-mobile {height:50vh;}}

/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

画像の設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */
img[class*="wp-image-"], img[class*="attachment-"] {max-width: 100%;height: auto;}
a:hover img {opacity:0.5;transition: all 0.3s ease;}
.wp-caption {max-width: 100%;margin-bottom: 1rem;}
.wp-caption img[class*="wp-image-"] {display: block;margin: 0;}
.wp-caption-text,.wp-caption-dd,.gallery-caption {font-size:0.875rem;}
.wp-caption-text {text-align: center;margin:0;padding:0.5rem 0;}
/* img,img.aligncenter {margin-bottom:10px;} */
.imgbottom0 {margin-bottom:0;}.imgbottom5{margin-bottom:5px;}.imgbottom10{margin-bottom:10px;}.imgbottom20{margin-bottom:20px;}.imgbottom30{margin-bottom:30px;}
.imgshadow{box-shadow:1px 1px 4px rgba(0,0,0,.5);}
.imgborder{border:6px solid #eee;}
.imgcircle{border-radius:50%;}
.imgradius,.imgradius5{border-radius:5px;}.imgradius10{border-radius:10px;}.imgradius20{border-radius:20px;}
.tilt1{transform:rotate(1deg);}.tilt2{transform:rotate(2deg);}.tilt3{transform:rotate(3deg);}.tilt4{transform:rotate(4deg);}.tilt5{transform:rotate(5deg);}.tilt10{transform:rotate(10deg);}.tilt30{transform:rotate(30deg);}.tilt45{transform:rotate(45deg);}.tilt90{transform:rotate(90deg);}.tilt-1{transform:rotate(-1deg);}.tilt-2{transform:rotate(-2deg);}.tilt-3{transform:rotate(-3deg);}.tilt-4{transform:rotate(-4deg);}.tilt-5{transform:rotate(-5deg);}.tilt-10{transform:rotate(-10deg);}.tilt-30{transform:rotate(-30deg);}.tilt-45{transform:rotate(-45deg);}.tilt-90{transform:rotate(-90deg);}

/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

色の設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */


/*--------------------------------------------------------------
基本色設定
--------------------------------------------------------------*/
/*0 リンク色 */
/*
a {color:#1565C0;}
a:focus,a:hover{color:#388E3C;}
a:visited{color:#4527A0;}
*/



/* primary color */
.bg-prim {background:#0071bc;}
.bg-prim-dark {background:#205493;}
.bg-prim-darkest {background:#112e51;}
.bg-prim-black {background:#212121;}
.bg-prim-gray-dark {background:#323a45;}
.bg-prim-gray-light {background:#aeb0b5;}
.bg-prim-white {background:#ffffff;}

/* primary alt */
.bg-alt {background:#02bfe7;}
.bg-alt-darkest {background:#046b99;}
.bg-alt-dark {background:#00a6d2;}
.bg-alt-light {background:#9bdaf1;}
.bg-alt-lightest {background:#e1f3f8;}

/* secondary */
.bg-sec {background:#e31c3d;}
.bg-sec-darkest {background:#981b1e;}
.bg-sec-dark {background:#cd2026;}
.bg-sec-light {background:#e59393;}
.bg-sec-lightest {background:#f9dede;}

/* tertiary gold */
.bg-ter-gold {background:#fdb81e;}
.bg-ter-gold-light {background:#f9c642;}
.bg-ter-gold-lighter {background:#fad980;}
.bg-ter-gold-lightest {background:#fff1d2;}

/* tertiary green */
.bg-ter-green {background:#e28540;}
.bg-ter-green-light {background:#4aa564;}
.bg-ter-green-lighter {background:#94bfa2;}
.bg-ter-green-lightest {background:#e7f4e4;}

/* tertiary cool-blue */
.bg-ter-cblue {background:#205493;}
.bg-ter-cblue-light {background:#4773aa;}
.bg-ter-cblue-lighter {background:#8ba6ca;}
.bg-ter-cblue-lightest {background:#dce4ef;}

/* gray */
.bg-gray-dark {background:#323a45;}
.bg-gray {background:#5b616b;}
.bg-gray-light {background:#aeb0b5;}
.bg-gray-lighter {background:#d6d7d9;}
.bg-gray-lightest {background:#f1f1f1;}
.bg-gray-clight {background:#dce4ef;}

/* warm dark */
.bg-warm-dark {background:#494440;}
.bg-warm-dark-light {background:#e4e2e0;}

/* basic Palette */
.bg-red {background:#e52207;}
.bg-orange {background:#e66f0e;}
.bg-gold {background:#ffbe2e;}
.bg-yellow {background:#fee685;}
.bg-green {background:#538200;}
.bg-mint {background:#04c585;}
.bg-cyan {background:#009ec1;}
.bg-blue {background:#0076d6;}
.bg-indigo {background:#676cc8;}
.bg-violet {background:#8168b3;}
.bg-magenta {background:#d72d79;}

/*--------------------------------------------------------------
ボックスの背景色 calloutと一緒に使用
--------------------------------------------------------------*/
.callout {border:none}
.red{background:#fde0dc;}.pink{background:#fce4ec;}.purple{background:#f3e5f5;}.deeppurple{background:#ede7f6;}.indigo{background:#e8eaf6;}.blue{background:#e7e9fd;}.lightblue{background:#e1f5fe;}.cyan{background:#e0f7fa;}.teal{background:#e0f2f1;}.green{background:#d0f8ce;}.lightgreen{background:#f1f8e9;}.lime{background:#f9fbe7;}.yellow{background:#fffde7;}.amber{background:#fff8e1;}.orange{background:#fff3e0;}.deeporange{background:#fbe9e7;}.brown{background:#efebe9;}.gray{background:#fafafa;}.bluegray{background:#eceff1;}.white{background:#f9f9f9; border:1px solid #efefef;}.beige{background:#faf8ee; border:1px solid #f4ecda;}.red,.pink,.purple,.deeppurple,.indigo,.blue,.lightblue,.cyan,.teal,.green,.lightgreen,.lime,.yellow,.amber,.orange,.deeporange,.brown,.gray,.bluegray,.white,.beige{overflow:hidden;}
.noborder{border:none;} /* 枠線無しにする場合 */
.border{border:1px solid #EFEBE9;} /* 枠線有りにする場合 */

.bg-gray+1	{background:#333333;}
.bg-gray	{background:#666666;}
.bg-gray-1	{background:#cccccc;}
.bg-gray-2	{background:#eeeeee;}


/* ■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■

grid、コンポーネントの設定

■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■-■ */


/*--------------------------------------------------------------
cellのpadding-bottom
--------------------------------------------------------------*/
.pb0 .cell,.pb0.cell {padding-bottom:0;}  
.pbs .cell,.pbs.cell {padding-bottom:0.625rem;} /* 10px */ 
.pbm .cell,.pbm.cell {padding-bottom:1.25rem;} /* 20px */ 
.pbl .cell,.pbl.cell {padding-bottom:2.5rem;} /* 40px */ 
.cell {padding-bottom:0;} /* 標準:0 */ 

/*--------------------------------------------------------------
alignment
--------------------------------------------------------------*/
.alignleft {display: inline;float: left;}
.alignright {display: inline;float: right;}
.aligncenter {display: block;margin-right: auto;margin-left: auto;}

/*
.wp-caption.alignleft,img.alignleft {margin-right: 1rem;margin-bottom: 1rem;}
.wp-caption.alignright,img.alignright {margin-left: 1rem;margin-bottom: 1rem;}
.wp-caption.aligncenter,img.aligncenter {clear: both;margin-bottom: 1rem;}
*/

/*--------------------------------------------------------------
セクション
--------------------------------------------------------------*/
section {padding:2rem 0 2rem;}
section + section {margin-top:0; margin-bottom:0;}
h1 + section {margin-top:0; margin-bottom:0; padding-top:0;}

/*--------------------------------------------------------------
2ページ目以降のタイトル
--------------------------------------------------------------*/
.title-area {background-size:cover; background-position:center center; display:flex; align-items:center; justify-content:center; height:150px; padding:0;margin:0 0 2rem;background-image:linear-gradient( 135deg, #333333, #cccccc);}
.title-area h2{width:100%; /* text-shadow:0 0 5px rgba(0,0,0,0.7); */ text-align:center;margin-top:0;margin-bottom:0;color:#fff;}
@media(max-width:640px){
.title-area {margin-top:50px;height: auto;min-height:100px;}
#menu-bottom + main .title-area {margin-top: 0;}
}
/* #menu-rightside + main .title-area,#menu-rightside + main section { margin-top:52px;padding-top:0;} */
@media (max-width: 640px) {
#menu-fade + main .title-area,#menu-fade + main section { margin-top:52px;padding-top:0;}
#scroll-navi + main .title-area {margin-top:0;}
}

/*--------------------------------------------------------------
要素を重ねる
--------------------------------------------------------------*/
@media (min-width:641px) {
.kasane { position:relative;height:500px;}
.kasane .image-box,.kasane .image-block {position:absolute;z-index:0;} 
.kasane .text-box,.kasane .text-block {position:absolute;z-index:1;right:0;bottom:0;}
}

/*--------------------------------------------------------------
callout
--------------------------------------------------------------*/
.callout{background:#eeeeee;}

/*--------------------------------------------------------------
flexbox 位置指定
--------------------------------------------------------------*/
.flex-center-between { display:flex;align-items:center;justify-content:space-between; }
.flex-center-center {display:flex; align-items:center;justify-content:center; }

/*--------------------------------------------------------------
タブ
--------------------------------------------------------------*/
.tabs {border:none;}
.tabs li { width:25%; display:flex; text-align:center; align-items:center;  }
.tabs-title>a { flex:auto; align-self:center; padding:1.25rem 1rem; font-size:0.875rem; line-height:1.3; text-decoration:none;}
.tabs-title>a,.tabs-title>a:hover,.tabs-title>a:focus,.tabs-title>a[aria-selected=true] { color:#333;}
.tabs-title>a:hover { background:#eee;}
.tabs li:first-child.tabs-title>a:focus,.tabs li:first-child.tabs-title>a[aria-selected=true] { background:#fff1d2;}
.tabs li:nth-child(2).tabs-title>a:focus,.tabs li:nth-child(2).tabs-title>a[aria-selected=true] { background:#e7f4e4;}
.tabs li:nth-child(3).tabs-title>a:focus,.tabs li:nth-child(4).tabs-title>a[aria-selected=true] { background:#f9dede;}
.tabs li:last-child.tabs-title>a:focus,.tabs li:last-child.tabs-title>a[aria-selected=true] { background:#dce4ef;}
.tabs li:first-child { border-bottom:2px solid #e28540;}
.tabs li:nth-child(2) { border-bottom:2px solid #4aa564;}
.tabs li:nth-child(3) { border-bottom:2px solid #e31c3d;}
.tabs li:last-child { border-bottom:2px solid #0071bc;}

/*--------------------------------------------------------------
スタイルガイド用
--------------------------------------------------------------*/
.style-guide .cell {border:1px solid #ccc; margin-bottom:1rem; display:flex; justify-content:center; align-items:center;}
.style-guide p{text-align:center; /*background:#fff;*/ display:inline; font-size:small; color:#fff;}

/*--------------------------------------------------------------
ブロックエディタの調整
--------------------------------------------------------------*/
.wp-block-media-text .wp-block-media-text__content {padding:0; margin-left:.9375rem; margin-right:.9375rem;}


/*--------------------------------------------------------------
table
--------------------------------------------------------------*/
thead th{background:#666;color:#fff;text-align:center;}
th, td {padding:8px; border:1px solid #183B72; vertical-align:top;}
th {background: #eee; text-align:center;}
table tbody tr:nth-child(even) {background:transparent;}
.align-left th {text-align:left;}
/* レスポンシブ */
@media only screen and (max-width:640px) {
.rps tr,.rps th,.rps td {display:block; width:auto;} 
.rps tr:first-child {border-top:1px solid #ccc;}
.rps th,.rps td {border-top:none;} 
.rps th {text-align:left;}
}

/*--------------------------------------------------------------
Foundation公式カード
--------------------------------------------------------------*/
.card img {margin: 0;}
.card-section {padding: 1rem;}
.card-section .category {color:#ccc;font-size: .875rem;}
.card-section .linkto a {color:#ccc;}


/*--------------------------------------------------------------
お知らせリスト 大カード形式
--------------------------------------------------------------*/
.topics .card{flex-grow:0 !important;border:none;box-shadow:0px 10px 20px -5px rgba(0, 0, 0, 0.1);}
.topics .card .photo {background-position:center; background-size:cover; margin:0; width:100%; padding-top:66.67%;transition:.3s;}
.topics .card:hover .photo {transform:scale(1.05,1.05); transition:.3s;}
.topics .card a {color:inherit;text-decoration:none;}
.topics .card .card-section {padding:0.5rem;}
.topics .card figure {margin:0; overflow:hidden; position:relative; display:flex !important; align-items:center; justify-content:center; background-position:center; background-size:cover; transition:.3s;}
.topics .card figure figcaption {opacity:0; position:absolute; text-align:center; transition:all 0.5s ease-in-out; top:0; left:0; right:0; bottom:0; margin:auto; padding-top:25%;}
a:hover>figure p { transform:scale(1.15,1.15);transition:all 0.5s ease-in-out;}
a:hover>figure figcaption{opacity:1;}
.topics .cell figure p:hover { box-shadow:0px 20px 40px rgba(0,0,0,0.4);transform:scale(1.05,1.05);}

@media (max-width: 640px) {
	.card-list-compact .card a {display: flex;}
	.card-list-compact .card a figure {flex: 2;}
	.card-list-compact .card a .card-section {flex:3;}
}

/*--------------------------------------------------------------
お知らせリスト 小カード形式
--------------------------------------------------------------*/
.topics .topic-item {background:#fff;padding:1rem;display:flex;align-items:center;margin-bottom:2rem;border-radius:4px;}
.topics .topic-item div {padding-bottom:0;}
.topics .topic-item img {margin-bottom:0;}
@media (max-width:640px) {.topics .topic-item {margin-bottom:1rem;}}

/*--------------------------------------------------------------
お知らせリスト リスト形式
--------------------------------------------------------------*/
.news-list li { padding:10px 0 5px; border-bottom:1px dashed RGBA(55,56,56,0.3);}
@media (min-width:641px) {.news-list li { display:flex; align-items:center;} }
.news-list a { display:block;}
.news-list .tag-box { display:inline-block;min-width:12rem;width:12rem;display:flex;align-items:center;}
@media (max-width:640px) {.news-list .tag-box { margin-bottom:0.4rem;} }
.news-list .label { display:inline-block; min-width:5rem; width:5rem; overflow:hidden; border-radius:4px; color:#fff; text-align:center; margin-right:0.5rem; padding:5px; font-size:0.625rem;}
.news-list .label.news { background:#00C853;}
.news-list .label.event { background:#FF5252;}
.news-list .label.item { background:#40C4FF;}

/*--------------------------------------------------------------
お知らせ横スクロール
--------------------------------------------------------------*/
.scrolling-wrapper { overflow-x:scroll; overflow-y:hidden; white-space:nowrap;}
.scrolling-wrapper .item { display:inline-block; width:75%; margin-right:1rem; white-space:normal;}
@media (min-width:641px) {.scrolling-wrapper .item { display:inline-block; width:40%;}}


/*--------------------------------------------------------------
コンタクトフォーム
--------------------------------------------------------------*/
#inquiry .callout.contact-form {background-color: #EBECF0;border:none;}
@media (min-width: 641px) {#inquiry .callout.contact-form {padding:3rem 4rem;border-radius: 20px;}}
#inquiry input,#inquiry textarea { margin-right: 8px;  box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;  width: 100%;  box-sizing: border-box;  transition: all 0.2s ease-in-out; appearance: none;}
#inquiry .submit-soshin{ width: auto;	padding:30px 60px !important;}
#inquiry input:focus,#inquiry textarea:focus { box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;}
#inquiry button, #inquiry .submit-soshin, #inquiry input, #inquiry textarea { border: 0;  outline: 0;  font-size: 1.25rem; border-radius: 320px; padding: 32px; background-color: #EBECF0; text-shadow: 1px 1px 0 #FFF;}
#inquiry textarea { border-radius: 20px;}
#inquiry button, #inquiry .submit-soshin { color: #61677C; font-weight: bold; box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC; transition: all 0.2s ease-in-out; cursor: pointer; font-weight: 600;}
#inquiry button:hover, #inquiry .submit-soshin:hover  {box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;}
#inquiry button:active,#inquiry .submit-soshin:active {box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;}
#inquiry input::placeholder,#inquiry textarea::placeholder {color:#666;}
input#sp-menu {display:none;}

/*--------------------------------------------------------------
after要素のアイコンフォント
--------------------------------------------------------------*/
.new:before{content:"NEW";font-weight: 900;background:#f00;padding:0 5px 2px;border-radius:5px;color:#fff;margin-right:5px;}
.movie:before{content:"動画▶";font-weight: 900;background:#304FFE;padding:0 5px 2px;border-radius:5px;color:#fff;margin-right:5px;}
.pdf:after{content:"\f1c1";font-family:"Font Awesome 5 Pro";font-weight:400;color:#f00;padding-left:5px;}
.word:after{content:"\f1c2";font-family:"Font Awesome 5 Pro";font-weight:400;color:#1A237E;padding-left:5px;}
.excel:after{content:"\f1c3";font-family:"Font Awesome 5 Pro";font-weight:400;color:#1B5E20;padding-left:5px;}
.gaibu:after{content:"\f35d";font-family:"Font Awesome 5 Pro";font-weight:400;color:#1B5E20;padding-left:5px;}
.more:after{content:"\f138";font-family:"Font Awesome 5 Pro";font-weight:400;padding-left:5px;}
.allow:after{content:"\f0a9";font-family:"Font Awesome 5 Pro";font-weight:400;color:#008000;padding-left:5px;}
.button.pdf:after,.button.word:after,.button.excel:after,.button.gaibu:after,.button.more:after{color:inherit;}

/*--------------------------------
 パンくずリスト
---------------------------------*/
#breadcrumb { margin: 1rem 0;}
#breadcrumb h1,#breadcrumb li { display: inline; list-style-type: none; font-size: 1.3rem; }
#breadcrumb i, #breadcrumb svg { margin-right: 3px;}
#breadcrumb i.arrow { margin: 0 8px;}
#breadcrumb a {color:#666;}

/*--------------------------------------------------------------
PAGE TOP Button
--------------------------------------------------------------*/
#page-top { position: fixed;bottom: 14px;right: 14px;font-weight: bold;background: #666;text-decoration: none;color: #fff;padding: 16px 20px;text-align: center;cursor: pointer;transition: .8s;opacity: 0;visibility: hidden;z-index: 99;}
#page-top:hover { opacity: 1!important; }
@media (max-width: 640px) {	/* PAGE TOP ボタンをアイコンのみに変更 */
	#page-top { font-size:2.0rem; padding: 8px 14px;}
	.ptop { display: none;}
}
/*--------------------------------------------------------------
ページナビ(ページャー)スタイル
--------------------------------------------------------------*/
.wp-pagenavi {clear: both;text-align:center;}
.wp-pagenavi a,.wp-pagenavi span {color: #fff;background-color: #666;padding: 0.5rem 1rem;margin: 0 2px;white-space:nowrap;border:none;border-radius:3px;transition: 0.2s ease-in-out;text-align: center;text-decoration: none;}
.wp-pagenavi a:hover{background-color: #eee;color: #fff;}
.wp-pagenavi span.current{background-color: #ccc;color: #fff;border:none;font-weight:bold;}
    
/*--------------------------------------------------------------
トップページ検索フォーム
--------------------------------------------------------------*/
#toppage-search-form {display: flex;justify-content: center;width: 100%;}
#toppage-search-form .input-group-field {display: inline-block;border-radius: 3px;}
.input-group-rounded .input-group-field {border-radius: 50px 0 0 50px !important;padding-left: 1rem;}
.input-group-rounded .input-group-button .button {border-radius: 0 50px 50px 0;font-size: 0.8rem;}
.input-group-button input[type="submit"] {content: "\f002";font-family: 'Font Awesome\ 5 Free';color:#fff;margin-right:5px;}
.top-search-form .input-group {margin-bottom: 0;}

/*--------------------------------------------------------------
検索結果
--------------------------------------------------------------*/
.res-cnt #list-title{margin:1rem 0 ;font-size:1.75rem;}
#list .callout {padding:2rem 3rem;}
#list h3 span, #list .exsp span {font-style:normal;}
#list .excerpt {line-height:1.4; font-size:0.8125rem;}

/*--------------------------------------------------------------
SNSボタン
--------------------------------------------------------------*/
ul.socialBtn {margin: 2rem 0 1rem;display:flex;flex-wrap: wrap;justify-content: center;}
ul.socialBtn [class^="icon-"]:before,ul.socialBtn [class*=" icon-"]:before {margin-right: 5px;}
ul.socialBtn li{list-style: none;margin-left: 0;}
ul.socialBtn li a {display: block;color: #fff;text-decoration: none;line-height: 42px;letter-spacing: .05em;font-size: 16px;text-align: center;}
.sns1 li {width: 25%;}
@media (max-width: 640px) {.sns1 li {width: 33%;}}
.sns1 li a.twitter {background: #1da1f2;}
.sns1 li a.facebook {background: #3b5998;}
.sns1 li a.line {background: #00b900;}
.sns1 .icon-twitter:before {content: '\f099';font-family: 'Font Awesome\ 5 Brands';font-weight: 900;}
.sns1 .icon-facebook:before {content: '\f39e';font-family: 'Font Awesome\ 5 Brands';font-weight: 900;}
.sns1 .icon-line:before {content: '\f3c0';font-family: 'Font Awesome\ 5 Brands';font-weight: 900;}
.sns2 li {width: 5%;min-width:4em;}
.sns2 .twitter {color:#1da1f2;}
.sns2 .facebook {color:#3b5998;}
.sns2 .line {color:#00b900;}