@charset "UTF-8";
/*
Template: swell
Theme Name: SWELL CHILD
Theme URI: https://swell-theme.com/
Description: SWELLの子テーマ
Version: 1.0.0
Author: LOOS WEB STUDIO
Author URI: https://loos-web-studio.com/

License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

html{
	font-size: 62.5%; /* -> 10px; */
}

body{
	font-size: 1.4rem; /* -> 14px; */
	line-height: 1.7;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* Safari */
	font-feature-settings: "palt" 1; /* カーニングを有効にする指定、１かonで有効 */
	letter-spacing: 0.04em; /* 字間調整 */
	/* じわっと画像が表示される */
	animation: fadeIn 1.5s ease 0s 1 normal;
	-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
@media screen and (min-width: 768px) {
	body{
		font-size: 1.6rem; 	
	}
}

.br-sp{
	display: block;
}
.br-pc{
	display:none;
}
@media screen and (min-width: 768px) {
	.br-sp{
		display:none;
	}
	.br-pc{
		display:block;
	}
}

/*----------
SWELL改造！
------------*/

/* メインビジュアルの下の余白削除 */
.top #content {
	padding-top: 0;
}

/* ヘッダーのロゴの位置合わせ・左端 */
.-img .c-headLogo__link {
	display: block;
	padding: 15px 0 5px;
}
/* ヘッダーのロゴの位置合わせ・ロゴ上 */
.l-header__logo {
	padding-left:15px;
	margin-right: auto;
}

/* SNSアイコンの色変更 */
.c-shareBtns__btn{
	color: var(--color_main);
}

/* サイドバーの広告バナーサイズ統一 */
.-sidebar-on #sidebar img {
	width: var(--swl-sidebar_width);
}
/* 上記でプロフ画像の比率が変わるのを回避 */
.p-profileBox__iconImg{
	width:120px!important;
}

.is-style-more_btn a{
	padding:5px 20px;
}
/*スマホヘッダー*/
.l-header, .l-header__inner  {
	background-color:rgba(255,255,255,0.7); 
}

/*スマホ開の影の背景 */
.p-spMenu__inner::before {
	display:block;
	width: 100%;
	background-image: url("https://www.maaagram.com/wp-content/uploads/2024/10/shadowofatree-scaled.jpg");
	background-color:rgba(255,255,255,0.6); 
	background-position:center center;
	background-size: cover;	
}

/*プロフ写真下余白調整*/
.wp-block-media-text>.wp-block-media-text__content {
	padding: 12px 12px 29px!important;   
}
@media (min-width: 600px) {
	.wp-block-media-text>.wp-block-media-text__content {
		padding: var(--swl-box_padding);
	}
}

/*プロフ写真調整*/
img.wp-image-7392.size-full{
	width:200px;
	height:200px;
	border-radius:50%;
	object-fit:cover;
	margin:50px auto 0;	
}
@media (min-width: 600px) {
	img.wp-image-7392.size-full{
		margin:50px auto;	
	}
}
/*ナビメニューの現在地の表示*/
.c-gnav>li:hover>a, .c-gnav>.-current>a {
	background: #fff;
	color: #333;
	border-bottom: 3px solid #333;
}
.c-gnav>li:hover>a{
	background: #f7f7f7;
	color: #333;
	border-bottom:none;
}
/*ブログカレンダーのリンク色変更*/
.wp-calendar-table tbody a {
    color:#fff;
}

/*----------
title
------------*/

.post_content .is-style-section_ttl{ /*トップページの各項目タイトル*/
	color: transparent;
	font-size: 5rem;
	font-weight: 600;
	-webkit-text-stroke: 1px #111;
	text-stroke: 1px #111;
	font-family: "arial", sans-serif;
	text-align:center;
}
@media (min-width: 600px) {
	.post_content .is-style-section_ttl{
		font-size: 7rem;
	}
}
.wp-block-heading.is-style-section_ttl{ /*トップページの各項目タイトル下余白*/
	margin-bottom:1em;
}
.post_content .is-style-section_ttl span { /*トップページの各項目日本語タイトル*/
	display: block;
	color:#9e9e9e;
	-webkit-text-stroke:0;
	text-stroke: 0;
	font-size: 0.25em;
	opacity: 0.8;
	letter-spacing: 0.2em;
}

.c-pageTitle{ /*固定ページのタイトル*/
	color: transparent;
	font-size: 5rem;
	font-weight: bold;
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	font-family: "arial", sans-serif;
	text-align:center;
}
@media (min-width: 600px) {
	.c-pageTitle{
		font-size: 7rem;
		text-align:left;
	}
}

/*----------
navigation
------------*/

/* 元のハンバーガーメニューを非表示 */
.c-iconBtn__icon {
	display: none;
}

/* 3本線 */
.l-header__menuBtn {
	position: relative;
}
.c-iconBtn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 20px;
	height: 1px;
	background-color: #333;
	transition: background-color 0.3s;
}
.c-iconBtn::before,
.c-iconBtn::after {
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	background-color: inherit;
	position: absolute;
	transition: transform 0.125s;
	top:0;
	left:0;
}
.c-iconBtn::before {
	top: -7px;
	left:0;
	width: 25px;
}
.c-iconBtn::after {
	top: 7px;
	left:0;
	width: 15px;
}

/* クリック時の動き */
[data-spmenu="opened"] .c-iconBtn {
	width: 100%;
	height: 100%;
	background-color: transparent;
}
[data-spmenu="opened"] .c-iconBtn::before,
[data-spmenu="opened"] .c-iconBtn::after {
	top: auto;
	transition: transform 0.3s;
	background-color: #333;
}
[data-spmenu="opened"] .c-iconBtn::before {
	transform: rotate(45deg);
	width: 25px;
}
[data-spmenu="opened"] .c-iconBtn::after {
	transform: rotate(135deg);
	width: 25px;
}

/* メニューをフェードイン */
.p-spMenu__body {
	opacity: 0;
}
[data-spmenu="opened"] .p-spMenu__body {
	opacity: 1;
	transition: opacity 1s ease-in, transform .7s ease-out;
}

/* オープンで出るリストメニュー */
.c-widget__title.-spmenu {	
	background: transparent;
	color: transparent;
	font-size: 4rem;
	font-weight: bold;
	-webkit-text-stroke: 1px #333;
	text-stroke: 1px  #333;
	font-family: "arial", sans-serif;
	padding:0;
	text-align:center;
	margin-bottom:0.5em;
	display:none; /*表示したくなったらblockに*/
}
@media (min-width: 600px) {
	.c-widget__title.-spmenu{
		font-size: 6rem;
	}
}
.p-spMenu__body .c-spnav a {
	border-bottom: none;
	display: block;
}
.p-spMenu__body .c-listMenu a {
	text-align:center;
	padding: 1em 0;
	font-size: 1.6rem;
}
.p-spMenu__body .c-gnav .sub-menu a:before, .c-listMenu a:before { /*記号消す*/
	display: none;    
}
.p-spMenu__body  {
	display: grid;
	justify-items: center;
	align-items: center;
}

/*----------
Animation
------------*/

/*スクロールすると下からふわっとフェードインする*/
.fadein{
	opacity : 0;
	transform: translateY(30px);
	transition: opacity 1s ease-in, transform .7s ease-out;
	transition-delay: 0.1s;

}
.fadein.animated{
	opacity : 1;
	transform: translateY(0);	
}

/*「fadeIn」でふんわり出現*/
.fadeIn {
	animation-name: fadeIn;
	animation-fill-mode:backwards;
	animation-duration:1.0s;
	animation-iteration-count:1;
	animation-timing-function:ease;
	animation-delay: 0.5s;
	animation-direction:normal;
}
@keyframes fadeIn{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



/* 1秒間かけてフェードイン */
.fadeIn1s {
	animation-name: fadeIn1s;
	animation-delay: 1s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	transform: translateY(50px);
	opacity: 0;
}
@keyframes fadeIn1s {
	0% {
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
	animation-name: fadeIn1500ms;
	animation-delay: 1500ms;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	transform: translateY(50px);
	opacity: 0;
}
@keyframes fadeIn1500ms {
	0% {
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 2秒間かけてフェードイン */
.fadeIn2s {
	animation-name: fadeIn1s;
	animation-delay: 2s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	transform: translateY(50px);
	opacity: 0;
}
@keyframes fadeIn2s {
	0% {
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/*順番に表示*/
.fadeinrow {
	opacity : 0;
	transition : all 1.3s;
}
.fadeinrow.active{
	opacity : 1;
}

/* スライドイン */
.slidein {
	opacity: 0;
	transform: translate(0,0);
	transition: all 0.7s;
}
.slidein-left{ /* 左からスライドイン */
	transform: translate(-100%,0);
}

.slidein-right{ /* 右からスライドイン */
	transform: translate(100%,0);
}
.slidein-up{ /*下からスライドイン*/
	transform: translate(0,-100%);
}
.scrollin{
	transform: translate(0, 0)!important;
	opacity: 1!important;
}

/*-------------
MainVisual/SVG
--------------*/
.svgall_container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
}
.svgall{
	display:block;
	width:65%;
	margin:0 auto;
	position: absolute; 
	z-index:99;
	filter: invert(100%); /* 白黒反転 */
}    
@media (min-width: 768px) {
	.svgall{
		width:50%;
	}  
}
@media screen and (min-width: 1025px) {
	.svgall{
		width:40%;
	}  
}

.st0{
	fill:#fff;
	stroke:#fff;
	stroke-width:10;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}
.st1{
	fill:none;
	stroke:#fff; /* ここは絶対白 */
	stroke-width:28;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	opacity:0.7;
}
.black{
	filter: none;
}


/* --- タイトルの背景透かし文字l-----------------------------------------*/
.basebox {
	text-align:center;
	display: inline-block; 
	position : relative; 
	width:100%;  /* BOXの横幅*/
	height : 100px; /* BOXの高さ*/
}
/* --- 前面文字の定義 -----------------------------------------*/
.basebox .c-widget__title  { /*タイトル*/
	text-align:center;
	width:100%; 
	margin:0 auto;
	height:70px;
	display: inline-block; /* インラインブロック化 */
	position: absolute; /* 親要素からの相対位置 */
	margin-bottom:0;
	border: 0; /* BOXの枠線 なし */
	font-size: 2rem; /* 前景文字のサイズ*/
	font-weight: bold; /* 太字*/
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
}
/* --- 背景透かし文字の定義 -----------------------------------*/
.basebox .backStr {
	width:100%; 
	position : absolute;/* 親要素からの相対位置 */
	display : inline-block;/* インラインブロック化 */
	white-space : nowrap;/* 折り返ししない*/
	font-size : 3.6rem;/* 背景透かし文字サイズ */
	font-weight : 800;/* 太字*/
	color : #DBDEE0; /* 背景透かし文字色*/
	font-feature-settings: "palt";
	letter-spacing: -0.001em;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-bottom:40px;
}
@media(min-width:600px){
	.basebox {          
		height : 180px; /* BOXの高さ*/
	}
	.basebox .backStr {
		font-size : 8rem;/* 背景透かし文字サイズ */
		font-weight : 800;/* 太字*/
		top: -10px;        
	}
	.basebox .c-widget__title { /*タイトル*/    
		height:70px;
		font-size: 4rem; /* 前景文字のサイズ*/    
		top: 90px;
	}
}
@media(min-width:769px){
	.basebox {          
		height : 200px; /* BOXの高さ*/
	}
	.basebox .backStr {
		font-size : 10rem;/* 背景透かし文字サイズ */
		font-weight : 800;/* 太字*/
		top: -20px;
	}
	.basebox .c-widget__title  { /*タイトル*/    
		height:80px;
		font-size: 5rem; /* 前景文字のサイズ*/    
		top: 100px;
	}
}
.thin_line{
	margin-top:40px;
	width:300px;
	height:120px; /*必ず高さを定義*/
	border-top:solid 1px #505050;
	border-bottom:solid 1px #505050;
	padding:10px;
}


/*----------
btn
------------*/

/*表示するテキストが切り替わる*/
.btntextchange{
	/*テキストの基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	border: 1px solid #555;
	border-radius:25px;
	min-width:150px;
	padding: 20px!important;
	text-align: center;
	display: inline-block!important;
	text-decoration: none;
	color: #333;
	background-color:#fff;
	outline: none;
	/*アニメーションの指定*/
	transition: all .2s;
}

/*hoverした際の変化*/
.btntextchange:hover{
	background:#333;
	color:#fff!important;
}

.btntextchange span{
	/*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
	transform:translate(-50%,-50%);
	/*アニメーションの指定*/
	transition: all .5s;
	/*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
	opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}

.btntextchange:hover span:nth-child(2){
	opacity:1;/*不透明に*/
	color:#fff!important;
}

div.btn_container{
	text-align:center;
	padding:0;
}


/*中央揃え用背景が暗転して別の文字が出るボタン*/
.button_syousai {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	overflow: hidden;
	border: 1px solid #18181a;
	color: #18181a;
	width:160px;
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1.8;
	padding:10px;
	margin:8px 0;
	background-color:#fffffe;
	background-color:var(--wh);
	text-align:center;
}
a.button_syousai{
	text-decoration:none;
}
.button_syousai span:first-child {
	position: relative;
	transition: color 500ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 10;
}

.button_syousai span:last-child {
	color: #fff;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 100;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translateY(225%) translateX(-50%);
	height: 14px;
}

.button_syousai:after {
	content: "";
	position: absolute;
	bottom: -50%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#2c2e31;
	background-color:var(--bk);
	transform-origin: bottom center;
	transition: transform 500ms cubic-bezier(0.48, 0, 0.12, 1);
	transform: skewY(9.3deg) scaleY(0);
	z-index: 50;
	text-align:center;
}

.button_syousai:hover:after {
	transform-origin: bottom center;
	transform: skewY(9.3deg) scaleY(2);
}

.button_syousai:hover span:last-child {
	transform: translateX(-50%) translateY(-100%);
	opacity: 1;
	transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
	line-height: 1.8; /* 大なり記号の位置調整 */
}

/*左揃え用背景が暗転して別の文字が出るボタン*/
.button_syousai2{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	overflow: hidden;
	border: 0.5px solid #18181a;
	color: #18181a;
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1.4;
	padding:18px 20px;
	min-width:220px;
	margin:0 auto;
	background-color:#fffffe;
	background-color:var(--wh);
	text-align:center;
	opacity:1!important;
}
a.button_syousai2{
	text-decoration:none!important;
}
.button_syousai2 span:first-child {
	position: relative;
	transition: color 500ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 10;
	opacity:1!important;
}

.button_syousai2 span:last-child {
	color: #fff;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 100;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translateY(225%) translateX(-50%);
	height: 14px;
}

.button_syousai2:after {
	content: "";
	position: absolute;
	bottom: -50%;
	left: 0;
	width: 100%;
	height: 100%;
	font-size:1.3rem;
	background-color:#2c2e31;
	background-color:var(--bk);
	transform-origin: bottom center;
	transition: transform 500ms cubic-bezier(0.48, 0, 0.12, 1);
	transform: skewY(9.3deg) scaleY(0);
	z-index: 50;
	text-align:center;
}

.button_syousai2:hover:after {
	transform-origin: bottom center;
	transform: skewY(9.3deg) scaleY(2);
	opacity:1!important;
}

.button_syousai2:hover span:last-child {
	transform: translateX(-50%) translateY(-100%);
	opacity:1!important;
	transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
	line-height: 1.4; /* 文字の位置調整 */
}

.btn_flex_container{
	display:inline-block;    
	max-width: 1000px;
	max-width: var(--large-width);
	margin:0 auto;
	padding:10px;
	background-color: #4B87C9;
	background-color: var(--main);
}
.btn_container{
	display:block;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
	padding:20px;
	background-color: #4B87C9;
	background-color: var(--main);
}

/*　buttonA　*/
button.buttonA {
	border:0.5px solid #333;
	background-color: #fff;
	color: #333;
	transition: .6s all;
	font-size:1.4rem;
	line-height:1.2;
}
button.buttonA:hover {
	border:0.5px solid #333;
	background-color: #333;
	color: #fff;
}



/*------------
ashirai
--------------*/
/*囲み版ズレ枠*/
h2.flame_zure{
	position: relative;
	padding: 1rem 2rem calc(1rem + 10px);
	background-color: rgba(255, 194, 194, 0.7);
}

h2.flame_zure:before{
	position: absolute;
	top: -7px;
	left: -7px;
	width: 100%;
	height: 100%;
	content: '';
	border: 4px solid #333;
	z-index:2;
}
.under {
	display:inline-block;
	position: relative;
}
.under:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px; 
	display:inline-block;
	width: 40px; 
	height: 3px; 
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); 
	background-color: #666666; 
}

.simple_border{
	font-size:1.6rem;
	font-size: 1.4rem;
	border-bottom: solid 3px #2c2e31;
}
.pen{
	background:linear-gradient(transparent 70%,#fff799 70%);
}

/*四角くクロスする線*/
.cross {
	position: relative;
	padding: 0.25em 1em;
	border-top: solid 2px #666;
	border-bottom: solid 2px #666;
	display:inline-block;
	margin-top:56px;
}
.cross:before, .cross:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
	height: -webkit-calc(100% + 14px);
	height: calc(100% + 14px);
	background-color: #666;
}
.cross:before {
	left: 7px;
}
.cross:after {
	right: 7px;
}
.box-shadow{
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

/*引用ペールブルー枠*/
.blockquote{
	display:block;
	width:100%;
	font-size: 1.4rem;
	padding: 10px 20px;
	line-height: 1.9;
	background-color: #f7f9f9;
	margin: 30px auto;
}
@media screen and (min-width: 768px){
	.blockquote{
		width:85%;
		padding: 25px 36px 30px;
		font-size: 1.6rem;
	}    
}
.blockquote p{
	width:100%!important;
}
.blockquote h3{
	font-size:1.6rem;
}
div.blockquote h2{
	margin-bottom: 0;
	padding-bottom:0;
}
.blockquote h4{
	padding:0 10px 0;
	margin: 20px 0 10px;
}
/*両サイドライン*/
h2.sideline {
	position: relative;
	display: inline-block;
	padding: 0 55px;
	margin-bottom:56px;
}

h2.sideline:before, h2.sideline:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	margin:0 auto;
	height: 1px;
	background-color: #000;	
}

h2.sideline:before {
	left:0;
}
h2.sideline:after {
	right:0;
}
/*色付きボックス*/
.color_box_blue {
	margin: 60px 0;
	background: #f1f1f1;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.color_box_blue  .box-title {
	font-size: 1.2em;
	background: #5fc2f5;
	padding: 4px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.color_box_blue  p {
	width:100%;
	padding: 15px 20px;
	margin: 0;
}
.color_box_blue  a {
	text-align:center;
}

div.entry-content{
	margin-bottom:40px;
}
.adcenter{
	width:90%;
	margin:0 auto 80px;
	text-align:center!important;
}







/*-----------------------------
stockphoto
------------------------------*/
/*CSSスライドショー設定
------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0; transform: scale(1);}
	10% {opacity: 1;}
	40% {transform: scale(1);}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0; transform: scale(1);}
	35% {opacity: 1;}
	65% {transform: scale(1);}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0; transform: scale(1);}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0; transform: scale(1);}
	100% {opacity: 0;}
}
/*4枚目*/
@keyframes slide4 {
	0% {opacity: 0;}
	50% {opacity: 0; transform: scale(1);}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0; transform: scale(1);}
	100% {opacity: 0;}
}

/*mainimg
-----------------------*/
/*画像ブロック*/
#mainimg, #subimg {
	clear: both;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}
/*subimgブロックの画像*/
#subimg img {
	width: 100%;
}
/*３枚画像の共通設定*/
.slide1,.slide2,.slide3,.slide4 {
	animation-duration: 12s;
	animation-iteration-count:infinite;
	position: absolute;left:0px;top:0px;width: 100%;height:auto;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 0.6s;
	flex-basis: 50%; /* flexアイテムの幅を割合で指定 */
}
/*土台画像*/
.slide0 {
	position: relative;width: 100%;height: auto;
}
/*１枚目*/
.slide1 {
	animation-name: slide1;
}
/*２枚目*/
.slide2 {
	animation-name: slide2;
}
/*３枚目*/
.slide3 {
	animation-name: slide3;
}
/*4枚目*/
.slide4 {
	animation-name: slide4;
}

.stock_btn_container{
	display:block;
	margin:0 0 56px;
}
.flexbox{
	max-width: 900px;
	margin: 0 auto 56px;
}
.flexbox img{
	width: 100%;
	display: block;
	margin: 0 auto 24px;
	border: 10px solid #f9f9f9;
	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
}
.flex_item{
	margin:0 0 16px;
}
.flex_item:last-of-type{
	margin:0 0 32px;
}
.flex_item_text{
	width:100%;
	margin-top:30px;
}
@media screen and (min-width:798px) { 
	.flexbox{
		display:flex;
		flex-wrap:nowrap;
		justify-content:space-between;
	}
	.flex_item_photo{
		width:65%;
	}
	.flex_item_text{
		width:35%;
		font-size:1.4rem;
	}
	.stock_btn_container{
		display:flex;
		flex-wrap:nowrap;
		justify-content:center;
		margin:32px 0 64px;
	}
	.flex_item{
		margin:0 10px 0 0;
	}
	.flex_item:last-of-type{
		margin:0;
	}
	.flex_item_photo+.flex_item_text{
		margin-left:3em;
	}
}
.flex_item_text p:last-of-type{
	margin-bottom:56px;
}

/*---------------
works・price
----------------*/


/*-----------------------------------------
blog
-------------------------------------------*/
.p-adBox p{ /*広告タグの上の宣伝文*/
	margin-bottom:20px;
	line-height:1.5;
	font-weight:600;
}

div.blog_insta{ /*ブログ記事内のインスタ埋め込み*/
	display:block;
	max-width:538px;
	margin:0 auto;
	margin-top:48px ;
	margin-bottom:18px;
}
@media screen and (min-width:  768px) {
	.blog_insta{ 
		width:100%;
		margin:0 auto;
	}
}

/*----------------------------
News 　ニュースティッカー
-----------------------------*/	

#news-ticker-container {
	position: relative;  
	overflow: hidden;  
	width:90%;
	margin:0 auto;
	height: 250px;
	display: block;  	
}

#news-ticker {
	position: absolute; 
	transition: transform 0.8s ease-in-out; 
	z-index:3;
	background-color:transparent;
	padding:0;
	height: 0; /*０にするとslide upしなくなる*/	
	align-items: center; 
}

@media (min-width: 798px) {
	#news-ticker-container {
		width:60%;
		height:200px;
		margin:0 auto;
		display: flex; 
		justify-content: space-between; 
	}
}

@keyframes slide-up {
	from {
		transform: translateY(100%); 
	}
	to {
		transform: translateY(0);
	}
}

#controls {
	width:100px;
	position: absolute;  
	right: 0;  
	bottom:0;
	display: flex;  
	align-items: center; 
	justify-content: flex-end;
	column-gap: 10px;  
	margin-top:80px;
}

#controls button {
	width:40px; 
	height: 30px;  
	line-height: 30px;  
	display: flex;  
	align-items: center;  
	justify-content: center; 
	margin: 0 auto;
	padding:20px 15px;
	border-radius:50%;
}

/*-----------
contact
-------------*/
.grecaptcha-badge {
	visibility: hidden;
}

/*紙飛行機*/
.svg_container { /*SVGをレスポンシブにする為にコンテナを用意*/
	position: relative;
	width: 100%;
}
.paperplane{
	stroke: #D9DADA;
	stroke-width: .1%;
	stroke-width: .5%;
	stroke-dasharray: 1% 2%;
	stroke-linecap: round;
	fill: none;
	position: absolute; /*SVGをレスポンシブにする為*/
	top: 0;
	left: 0;
}
.fil1 {
	fill: #D9DADA;
}
.fil2 {
	fill: #C5C6C6;
}
.fil4 {
	fill: #9D9E9E;
}
.fil3 {
	fill: #AEAFB0;
}


/*ContactFormカスタマイズ*/

table{
	border-collapse: separate;
	text-indent: initial;
	border-spacing: 5px;
}

table.CF7_table{
	display:block;
	width:100%;
	border: 0.5px solid #808080;
	padding:5px;
	font-size:1.2rem;
	color:#444;
}
@media screen and (min-width: 768px){
	table.CF7_table{
		width:100%;
		font-size:1.4rem;
		padding:10px;
	}
}
table.CF7_table tbody {
	display:block;
	width:100%;
}

/*入力欄*/

.CF7_table input, .CF7_table textarea {
	border: 0.5px solid #808080;
	font-size:1.4rem;
	width: 100%;
	padding:10px;
	background: #fff;
}

@media screen and (min-width: 768px){
	.CF7_table input, .CF7_table textarea {
		width:100%;
		margin-bottom:0;
		font-size:1.6rem;
	}
}

.CF7_table ::placeholder { /*記入サンプル*/
	color:#dce0e3;
	font-size:1.3rem;
}

/*「必須」文字*/
.CF7_req{
	font-size:0.8em;
	padding: 5px;
	background: #fff;
	color: #bb0000;
	border: 0.5px solid #bb0000;
	margin: 0 1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:0.8em;
	padding: 5px;
	background: #fff;
	color: #444;
	border: 0.5px solid #444;
	margin: 0 1em;
}

/* タイトル列 */
.CF7_table th{
	background-color:#f2f2f2;
	text-align:left;
	font-weight:400;
	padding:10px ;
	background-color:#f2f2f2;
	width:30%;
	margin:10px 0;
}    
.CF7_table th p{
	margin:0;
}    
@media screen and (min-width: 768px){
	.CF7_table th{
		width:30%;
		margin-top:10px;
	} 
}

.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
}

/* 「送信する」ボタン */

input.wpcf7-form-control.wpcf7-submit{ /*デフォルトのボタンスタイルを消す*/
	border-style:none;
	margin:0!important;
	padding:0!important;
	background-color:transparent;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
}

/*--- 線から塗り（共通設定） ---*/

.CF7_btn{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	display: inline-block;
	color: #333;
	background:#989898; /* 「送信する」ボタンの色 */
	text-decoration: none;
	outline: none;
	/*アニメーションの指定*/
	transition: all .3s;
	transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}

/*hoverした際の、ボタンの背景とテキスト色の変更*/
.CF7_btn:hover{
	background:#333;
	color: #fff;
}

/*線の設定*/
.CF7_btn span{
	display: block;
}

/*横線の設定*/
.CF7_btn::before,
.CF7_btn::after{
	content:"";
	/*絶対配置で線の位置を決める*/   
	position: absolute;
	/*線の形状*/   
	width: 0;
	height: 1px;
	background: #333;
	/*アニメーションの指定*/
	transition: all 0.2s linear;
}

/*縦線の設定*/
.CF7_btn span::before,
.CF7_btn span::after{
	content:"";
	/*絶対配置で線の位置を決める*/   
	position: absolute;
	/*線の形状*/
	width:1px;
	height:0;
	background: #333;
	/*アニメーションの指定*/
	transition: all 0.2s linear;
}

/*hoverした際、線が縦横100%伸びる*/
.CF7_btn:hover::before,
.CF7_btn:hover::after{
	width: 100%;
}
.CF7_btn:hover span::before,
.CF7_btn:hover span::after{
	height: 100%;
}

/*== 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに */

/*左下から右下へ伸びる横線*/
.bordercircle2::after{
	left: 0;
	bottom: 0;
}

/*右下から上へ伸びる縦線*/
.bordercircle2 span::after{
	right: 0;
	bottom: 0;
	transition-delay: 0.2s;
}

/*右上から左上へ伸びる横線*/
.bordercircle2::before{
	right: 0;
	top: 0;
	transition-delay: 0.4s;
}

/*左上から左下へ伸びる横線*/
.bordercircle2 span::before{
	left: 0;
	top: 0;
	transition-delay: 0.6s;
}

button.CF7_btn.bordercircle2{ /*ボタン周りの余白*/
	display:block;
	margin:40px auto 0;
	padding:20px 50px 0;
}






/*--------------------------
前のBlogで使っていたセレクタ
ブロックエディタで書き直したら消す
----------------------------*/

.blog_content{ /*ブログ記事の段落*/
	margin-bottom:30px;	
}
.blog_main-contents p{ /*ブログ記事の文 */
	font-size:1.4rem;
	padding:10px 0 15px;
	width:90%;
	margin:0 auto;
	color: #5e5e5e;
}
@media screen and (min-width:  768px){

	.blog_content{ 
		margin-bottom:56px;	
	}
	.blog_main-contents p{ 
		font-size:1.6rem;
		padding:15px 0 20px;
	}
}
.blog_section{ /* ブログの段落 */
	width:100%;
	margin:0 auto 30px;
}

.blog_main_container p{ 
	width:100%;
	margin:0 auto 30px;
}
@media screen and (min-width:  768px){
	.blog_main_container p{ 
		width:85%;
		margin:0 auto 30px;
	}	
}

.blog_main_container a{ 
	text-underline-offset: 3px;
	text-decoration:underline;
}

figure.banner img{ /* ASのバナーに使ってる */
	width:250px;
	margin:20px 30px;
	image-rendering: -webkit-optimize-contrast;/*Chromeで縮小時の画像ボヤけ対策 */
}
.blog_main-contents img{ /*ブログ記事内の写真*/
	display:block;
	width:100%;
	margin:0 auto;
	margin-bottom:15px;
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;/*Chromeで縮小時の画像ボヤけ対策 */
	pointer-events: none;/* PCの右クリック禁止 */
	-webkit-touch-callout:none;/* SPの長押し禁止 */
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}
.blog_main-container img{ /*ブログ記事内の写真*/
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;/*Chromeで縮小時の画像ボヤけ対策 */
	pointer-events: none;/* PCの右クリック禁止 */
	-webkit-touch-callout:none;/* SPの長押し禁止 */
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}
.blog_content_noborder img{
	width:90%;
	margin: 0 auto;
}
.blog_content_noborder img{ /*ブログ記事内の写真にフチを付けたくない場合*/
	border-style:none;
	box-shadow:none;
}
.noborder img{ /*ブログ記事内の写真にフチを付けたくない場合*/
	border-style:none;
	box-shadow:none;
}

.spacer_bottom10{
	margin-bottom:10px;
}
.spacer_bottom20{
	margin-bottom:20px;
}
.spacer_bottom32{
	margin-bottom:32px;
}
.spacer_bottom49{
	margin-bottom:49px;
}
.spacer_bottom56{
	margin-bottom:56px;
}
.spacer_bottom64{
	margin-bottom:64px;
}
.spacer_bottom72{
	margin-bottom:72px;
}
.spacer_bottom100{
	margin-bottom:100px;
}
p.ad_caption { /*広告画像のキャプション*/
	padding-bottom:15px;
	margin-bottom:0;
	line-height:1.5;
}

.blog_hosoku{ /*ブログ記事の補足*/
	display:block;
	width:100%;
	margin:0 auto;
	margin:56px auto 18px;
}

.blog_ad{ /*ブログ記事内の広告写真*/
	display:block;
	max-width:500px;
	max-height:500px;
	margin:0 auto;
	margin:30px auto;
	object-fit:cover;
	overflow:hidden; /*写真の下の白枠を消している*/
	border-style: none;
	box-shadow: none;
}
.blog_ad img{ /*ブログ記事内の広告写真*/
	display:block;
	width:100%;
	margin:0 auto;
	border-style: none;
	box-shadow: none;
	overflow:hidden; /*写真の下の白枠を消している*/
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;/*Chromeで縮小時の画像ボヤけ対策 */
}

.blog_ad_320 img{ 
	display:block;
	max-width:320px;
	max-height:100px;
	object-fit:cover;
	overflow:hidden; 
	border-style:none;
	box-shadow:none;
}
.blog_ad_320{ 
	margin: 0 auto 30PX ;
}
.blog_ad_468 img{ 
	display:block;
	max-width:468px;
	max-height:60px;
	margin:20px auto;
	object-fit:cover;
	overflow:hidden; 
	border-style:none;
	box-shadow:none;
}
.blog_ad_468{ 
	margin:0 auto 30px;
}
@media screen and (min-width:  768px) {
	.blog_ad_320{ 
		margin: 0 auto 56PX ;
	}
	.blog_ad_468{ 
		margin: 0 auto 56PX ;
	}
}
.blog_ad_468 figcaption{ 
	text-align:center;
}
.blog_ad_600{ 
	display:block;
	max-width:600px;
	max-height:90px;
	margin:0 auto 30px;
	object-fit:cover;
	overflow:hidden; 
}

.blog_ad_small{ /*ブログ記事内の広告写真小さめ*/
	display:block;
	max-width:400px;
	max-height:400px;
	margin:56px auto;
	object-fit:cover;
	overflow:hidden; 
}

.float-right{
	width:100%;
	clear:both;
}
@media screen and (min-width:  768px) {
	.float-right{
		width:40%;
		float:right;
		margin-top:-350px;
	}
}


/*ブログ記事内の文と写真ここまで*/



/*数字付き箇条書き*/
ul.number{
	counter-reset:list;
	list-style-type:none;
	padding:0;
	margin:0 0 30px 30px ;    
}
ul.number li{
	position:relative;
	color: #333;
	padding: 5px 10px;
	margin: 7px 0px;
	margin-left:0;
	font-size:1.6rem;
	line-height: 1.5;
	border-bottom: dashed 1px #ccc;
}
ul.number li:before{
	counter-increment: list;
	content: counter(list) ".";
	display: block;
	position: absolute;
	left: -20px;
	font-weight: bold;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
ul.number p{
	margin:0!important;    
}
@media (min-width: 768px) {
	ul.number p{
		margin:0 0 30px 30px ;    
	}
}
ul.number img{
	width:90%;
	margin: 0 auto 0 0;
}
@media (min-width: 768px) {
	ul.number img{
		margin:0 ;    
	}
}


/* 反転カード*/
.flip-card {
	background-color: transparent;
	width: 219px;
	height: 293px;
	border: 0px solid #f1f1f1;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card_name { 
	color: #888;
	padding:30px 15px 10px;
	font-weight:bold;
	font-size:1.6rem;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

.flip-card-front {
	background-color: #f7f6f6;
	color: #888;
}

.flip-card-back {
	background-color: #feeeed;
	color: fff;
	transform: rotateY(180deg);
}

/* 反転した時の囲み枠 */
.cardbox1 {
	padding: 2em 1em;
	margin: 1em 1em;
	font-weight: bold;
	border: solid 3px #fff;
}
.cardbox1 p {
	margin: 0; 
	padding: 0;
}

.flip-card_container {/* 反転カードの大枠 */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 80%;
	margin:0 auto;
	grid-column-gap:10px;
	grid-row-gap:10px;
}
.flip-card_item img {
	display:inline-block;
	width: 219px;
	margin:0 auto;
	text-align: center;
}
@media screen and (min-width:  768px) { 
	.flip-card_item {
		width: calc(100% / 2);
		padding: 20px 10px;
		text-align: center;
	}
	.flip-card_container {/* 反転カードの大枠 */
		grid-column-gap:0px;
		grid-row-gap:0px;
	}
	.program_item_body p {
		font-size:1.6rem;
	}

	p.ad_caption{
		display:block;
		max-width:300px;
	}
}

/*program*/
.program {
	flex-direction: column; /*sp用に縦並びにする*/
}

.program .program_item {
	width: 100%;
	margin: 0 auto;
}
.program_item_img {
	flex-direction: column; /*sp用に縦並びにする*/
	width: 100%;
	height: 250px;
	margin:0 auto;
	padding: 0;
}
.program_item_img img {
	width: 100%;
	height: 250px;
	object-fit:cover;
	padding: 0;
}
div.program_item_body {
	padding: 0;
	width: 90%;
	margin:24px auto 48px;
}
.program_item_title {
	margin: 20px 0 8px;
	font-size: 1.8rem;
	font-weight: 800;
	color: #333;
	line-height:1.3;
}
.program_item_body p {
	width: 100%;
	margin:15px 0 0;
	font-weight: 400;
	color: #333;
	font-size:1.4rem;
	line-height:1.75;
}

@media (min-width: 768px) {
	.program {
		width:100%;
		margin:0;        
	}
	.program_item {
		width: 100%;
		margin: 10px;
	}
	.program_item_img {
		width: 90%;
		height: 400px;
	}
	.program_item_img img {
		width: 90%;
		height: 400px;
		object-fit:cover;
		padding: 0;
	}
	.program_item_title {
		width:80%;
		margin:0 auto;
		padding-top:20px;
	}
	.program_item_body p {
		font-size:1.6rem;
		width:80%;
		margin:0 auto;
	}
}