@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@400..700&family=Noto+Sans+JP:wght@100..900&Zen+Old+Mincho:wght@600&display=swap');

/*------------------------------------------------------

	リセット

------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-style: normal;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
table { border-collapse: collapse; border-spacing: 0;}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #c8c8c8;
	margin: 0;
	padding: 0;
}
input, select { vertical-align: middle;}
img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: top;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	image-rendering: auto;
}
*, *:before, *:after { box-sizing: border-box;}

sup { font-size: 70%; vertical-align: super;}


/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #3c3c3c;
	font-size: 1em;
  font-weight: 400;
	line-height: 2;
	position: relative;
	min-width: 1030px;
}

.fo_ex { font-family: "Expletus Sans", sans-serif;}
.fo_zen { font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-weight: 500;}

.medium { font-weight: 500;}
.semi { font-weight: 600;}
.bold { font-weight: 700;}

p { margin-bottom: 30px;}
p:last-child { margin-bottom: 0px;}

a { color: #3c3c3c; text-decoration: none;}
a:hover { color: #236880; text-decoration: underline;}

/* 文字装飾 */
.fo06 { font-size: 0.6em !important;}
.fo07 { font-size: 0.7em !important;}
.fo075 { font-size: 0.75em !important;}
.fo08 { font-size: 0.8em !important;}
.fo085 { font-size: 0.85em !important;}
.fo088 { font-size: 0.875em !important;}
.fo09 { font-size: 0.9em !important;}
.fo105 { font-size: 1.05em !important;}
.fo11 { font-size: 1.1em !important;}
.fo115 { font-size: 1.15em !important;}
.fo12 { font-size: 1.2em !important;}
.fo125 { font-size: 1.25em !important;}
.fo13 { font-size: 1.3em !important;}
.fo14 { font-size: 1.4em !important;}
.fo15 { font-size: 1.5em !important;}
.fo16 { font-size: 1.6em !important;}
.fo17 { font-size: 1.7em !important;}
.fo18 { font-size: 1.8em !important;}
.fo19 { font-size: 1.9em !important;}
.fo20 { font-size: 2em !important;}

.lh12 { line-height: 1.2;}
.lh14 { line-height: 1.4;}
.lh16 { line-height: 1.6;}
.lh18 { line-height: 1.8;}
.lh20 { line-height: 2;}

.ls005 { letter-spacing: 0.05em;}
.ls01 { letter-spacing: 0.1em;}
.ls02 { letter-spacing: 0.2em;}

.fo_white { color: #FFFFFF !important;}

/* ボックス */
.cont1000 { max-width: 1030px; padding: 0px 15px; margin: auto;}
.cont1100 { max-width: 1130px; padding: 0px 15px; margin: auto;}
.cont1200 { max-width: 1230px; padding: 0px 15px; margin: auto;}
.cont1300 { max-width: 1330px; padding: 0px 15px; margin: auto;}
.cont1400 { max-width: 1430px; padding: 0px 15px; margin: auto;}

.left { float: left;}
.right { float: right;}

.pos_rel { position: relative;}
.pos_ab { position: absolute;}

.z-1 { z-index: -1;}
.z50 { z-index: 50;}

.ta_center { text-align: center;}
.ta_right { text-align: right;}
.ta_left { text-align: left;}
.ta_right-s_center { text-align: right;}
.ta_left-s_center { text-align: left;}
.ta_center-s_left { text-align: center;}

.break_keep { word-break: keep-all; overflow-wrap: anywhere;}

.back_white { background-color: #fff !important;}
.back_gray { background-color: #f9f8f8 !important;}

@media print,  (min-width: 769px) {
	.hidden_l { display: none !important;}
}

/* リスト */
ol { padding-left: 2em;}
ol li { list-style: outside decimal;}

.list_disc { padding-left: 1em;}
.list_disc li { list-style: outside disc;}

.list_indent { padding-left: 1em;}
.list_indent li { text-indent: -1em;}

/* margin */
.mb00 { margin-bottom: 0px !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb50 { margin-bottom: 50px !important;}
.mb60 { margin-bottom: 60px !important;}
.mb80 { margin-bottom: 80px !important;}
.mb80 { margin-bottom: 80px !important;}

.mb40-20 { margin-bottom: 40px !important;}
.mb50-30 { margin-bottom: 50px !important;}
.mb60-30 { margin-bottom: 60px !important;}
.mb80-40 { margin-bottom: 80px !important;}
.mb100-60 { margin-bottom: 100px !important;}
.mb120-60 { margin-bottom: 120px !important;}
.mb120-80 { margin-bottom: 120px !important;}
.mb160-80 { margin-bottom: 160px !important;}

.mt10 { margin-top: 10px !important;}
.mt20 { margin-top: 20px !important;}
.mt30 { margin-top: 30px !important;}
.mt40 { margin-top: 40px !important;}
.mt50 { margin-top: 50px !important;}
.mt60 { margin-top: 60px !important;}
.mt70 { margin-top: 70px !important;}
.mt80 { margin-top: 80px !important;}
.mt100 { margin-top: 100px !important;}
.mt150 { margin-top: 150px !important;}

/* clearFix */
.clearFix { zoom: 100%;}
.clearFix:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

/* ------------------------
	ヘッダー
------------------------ */

body { padding-top: 117px;}

.header { position: fixed; top: 0px; left: 0px; width: 100%; min-width: 1030px; background: #fff; z-index: 9999; display: flex; justify-content: space-between; align-items: center; padding-left: 1.5%;}
.header h1 { width: 30%;}
.header .btn_area, .header .list01, .header .list02 { display: flex; align-items: center; justify-content: flex-end;}
.header .list01 { gap: 0.8em; margin-right: 1.5em;}
.header .list01 img { vertical-align: middle;}

.header .list02 a { display: block; color: #fff; text-decoration: none; background: url("../images/common/ico_cart.svg") no-repeat 1.4em center #5aa8a7; background-size: 1.3em auto; padding: 1em 1.3em 1em 3.1em;}
.header .list02 li:last-child a { background: url("../images/common/ico_mail.svg") no-repeat 0.85em center #236880; background-size: 1.5em auto;}

/* ------------------------
	グローバルナビ
------------------------ */

.gn { display: flex; align-items: center; letter-spacing: 0.1em;}
.gn > li:not(:last-child):after { content: "　/　"; color: #236880; letter-spacing: 0;}
.gn a { text-decoration: none;}
.gn > li > a, .gn > li > span { display: inline-block; padding-bottom: 0.8em; cursor: pointer;}

.gn .dd > a, .gn .dd > span { position: relative;}
.gn .dd > a:after, .gn .dd > span:after { content: ""; position: absolute; background: url("../images/common/arrow_dn_gray.svg") no-repeat center center; background-size: auto 100%; width: 0.8em; height: 0.55em; left: 50%; transform: translateX(-50%); bottom: 0.2em;}
.gn .dd_wrap {
	position: absolute;
	display: none;
	width: 100%;
  left: 0px;
  border-top: solid 2px #5aa8a7;
  padding: 40px 0px;
}
.gn .dd:hover > span { color: #236880;}
.gn .dd:hover > a:after, .gn .dd:hover > span:after { background-image: url("../images/common/arrow_dn_green.svg");}
.gn .dd_wrap .cont1200 { display: flex; justify-content: space-between; align-items: center;}
.gn .dd_wrap h2 { padding-bottom: 0.5em;}
.gn .dd_wrap h2:after { content: ""; position: absolute; width: 2em; height: 3px; background: #236880; bottom: 0px; left: 50%; transform: translateX(-50%);}
.gn .dd_wrap .sub { width: 83%; display: flex; justify-content: space-between;}
.gn .dd_wrap .sub li { width: 22.5%;}
.gn .dd_wrap .sub img { width: 100%;}
.gn .dd_wrap .sub .text01:after { content: ""; display: inline-block; background: url("../images/common/ico_arrow.svg") no-repeat center center; background-size: 100% auto; width: 0.45em; height: 1em; vertical-align: middle; margin-left: 0.5em;}

/* ------------------------
	フッター
------------------------ */

.footer_nav { padding: 100px 0;}
.footer_nav li { display: inline-block;}
.footer_nav li:not(:last-child):after { content: "　｜　";}

.footer h2 { font-size: min(5.5vw,1.9em);}
.dl_sns { display: flex; align-items: center; justify-content: center; gap: 1em;}
.dl_sns dt { border-right: solid 4px #236880; padding-right: 1.2em;}
.dl_sns img, .footer .copy img { vertical-align: middle;}

.footer .copy { padding: 5px 20px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5em 2em}

.pagetop { position: fixed; right: 30px; bottom: 0px; padding-bottom: 30px; z-index: 9999;}


/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

.mainimage { height: calc(100vh - 118px);}
.mainimage img, .mainimage video { width: 100%; height: 100%; object-fit: cover;}

.top_bg01 { padding: 120px 0 1px;}

.top_pickup { display: flex; justify-content: space-between; align-items: center; gap: 2em;}
.top_pickup h2.top_en_btmline { font-size: 1.6em; width: 10em; letter-spacing: 0.1em; padding-bottom: 0.4em;}
.top_pickup .more_btn a { text-align: center; min-width: 130px; font-size: 0.85em;}
.top_pickup .news-slider { flex: 1;}
.top_pickup dl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em;}
.top_pickup dt { width: 100%;}
.top_pickup .category { width: 9em;}
.top_pickup dd:last-child { width: calc(100% - 9.5em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.news-track { display: flex; transform: translateX(0);}
.news-track > li { flex: 0 0 100%;}

.top_en_btmline { font-size: 1.85em; line-height: 1.2; letter-spacing: 0.2em; padding-bottom: 0.1em;}
.top_en_btmline:after { content: ""; position: absolute; width: 1.6em; height: 3px; background: #236880; bottom: 0px; left: 50%; transform: translateX(-50%);}
.top_en_btmline.border_left:after { left: 0px; transform: none;}

.top_bnr .list01 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 3em;}
.top_bnr .list01 li { margin-bottom: 3em;}
.top_bnr .list01 .break { width: 100%; margin-bottom: 0px;}
.top_bnr .list01 img { vertical-align: middle; mix-blend-mode: multiply;}
.top_bnr .list01 .end { align-self: flex-end;}

.top_sec01 { max-width: 1400px; margin: auto; border-radius: 30px; padding: 100px 0 1px;}
.top_sec01 h3 { font-size: 2.5em;}
.top_sec01 .text01 { font-size: clamp(1.7em,2.7vw,1.9em);}
.top_sec01 .box01 { display: flex; justify-content: space-between; column-gap: 2em;}
.top_sec01 section:nth-of-type(even) .box01 { flex-flow: row-reverse;}
.top_sec01 .box01 .box_inner { width: 46%;}
.top_sec01 .box01 .img_box { width: 50%;}
.top_sec01 .text02 { border: solid 1px #3c3c3c; font-size: clamp(1em,1.6vw,1.25em); padding: 0.7em;}

.top_sec01 .list01 { display: flex; align-items: center; gap: 5%;}

.top_sec02 .list01 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px 2.5em;}
.top_sec02 .list01 li { width: calc((100% - 7.5em) / 4);}
.top_sec02 .list01 .back_white { margin: -2em 6% 0px; position: relative; z-index: 100; padding-top: 30px;}
.top_sec02 .list01 .fo_ex { max-width: 200px; margin: auto; border-bottom: solid 3px #236880; line-height: 1.3; padding-bottom: 10px; letter-spacing: 0.15em; font-size: 0.9em;}
.top_sec02 .list01 .num { font-size: 2.3em; line-height: 1;}
.top_sec02 .list01 li > a { display: block; text-decoration: none !important;}
.top_sec02 h3.fo13 { display: flex; justify-content: center; align-items: center; height: 2.8em; font-size: clamp(1em,1.75vw,1.3em) !important;}

.top_bg02 { padding: 160px 0 1px;}

.top_sec03 dl { display: flex; gap: 0.5em 1.5em; border-bottom: solid 1px #ded8d4; padding-bottom: 1.5em; margin-bottom: 1.5em;}
.top_sec03 dt { font-size: 0.9em;}
.top_sec03 dd:last-child { flex: 1;}

.category a { display: block; background: #fff; border: solid 1px #3c3c3c; text-align: center; font-size: 0.85em; line-height: 1.5; width: 8.5rem; text-decoration: none; padding: 0.1em 0.4em; color: #000; position: relative; transition: 0.2s;}
.category a:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.9em 0.9em 0 0;
	border-color: #236880 transparent transparent transparent;
	top: 0px;
	left: 0px;
}
.category a:hover { background: #236880; color: #fff;}
.category a:hover:before { border-color: #fff transparent transparent transparent;}

.top_sec04 section { display: flex; justify-content: space-between; align-items: center;}
.top_sec04 section:nth-of-type(even) { flex-flow: row-reverse;}
.top_sec04 .box_inner { width: 30%; height: 600px; display: flex; align-items: center;}
.top_sec04 .box_inner:before { content: ""; position: absolute; z-index: -1; background: url("../images/top/top_sec05_bg01.svg") no-repeat center center; background-size: cover; width: 962px; height: 100%; top: 0px; right: -66.6%;}
.top_sec04 section:nth-of-type(even) .box_inner:before { background-image: url("../images/top/top_sec05_bg02.svg"); left: -66.6%; right: auto;}
.top_sec04 .box_inner > div { width: 100%;}
.top_sec04 figure { width: 62%;}
.top_sec04 figure img { border-radius: 1em;}
.top_sec04 .more_btn a { box-shadow: 1px 1px 0px #fff; color: #fff; padding-right: 3.5em}
.top_sec04 .sec01 .more_btn a { display: block;}
.top_sec04 .more_btn a:hover { box-shadow: 1px 1px 0px #3c3c3c;}
.top_sec04 .more_btn a:after { border-color: #fff;}
.top_sec04 .list01 { display: flex; flex-wrap: wrap; flex-direction: column; gap: 30px;}
.top_sec04 .sec02 .top_en_btmline:before { content: ""; position: absolute; background: url("../images/common/ico_cart.svg") no-repeat center center; background-size: 100% auto; width: 1em; height: 1.2em; left: -1.5em; top: 0px;}

.top_bnr02 { display: flex; max-width: 1920px; margin: auto;}
.top_bnr02 a { width: 50%; display: block; padding-bottom: 1.5em; font-size: clamp(1.05em,1.6vw,1.55em); letter-spacing: 0.1em;}
.top_bnr02 figcaption { width: 75%; left: 50%; transform: translateX(-50%); bottom: -1.5em; padding: 1.3em 1em 0.7em;}
.top_bnr02 figcaption:after { content: ""; position: absolute; width: 4em; height: 3px; background: #236880; bottom: 0px; left: 50%; transform: translateX(-50%);}

/* animation */
.scroll_in { opacity: 0;}
.displayed { animation-duration: 1s; animation-fill-mode: both;}
.delay02s { animation-delay: 0.2s;}
.delay04s { animation-delay: 0.4s;}
.delay06s { animation-delay: 0.6s;}
.delay08s { animation-delay: 0.8s;}
.duration2s { animation-duration: 2s;}
.duration3s { animation-duration: 3s;}

.fadeIn.displayed { animation-name: fadeIn;}
@keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}

.fadeInUp.displayed { animation: fadeInUp 0.8s ease forwards;}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInLeft.displayed { animation: fadeInLeft 0.8s ease forwards;}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.maskIn { position: relative; overflow: hidden; display: inline-block; opacity: 1;}
.maskText { opacity: 0; display: inline-block; position: relative; z-index: 1; transition: opacity 0.3s ease 0.5s;}
.maskIn.displayed .maskText { opacity: 1;}
.maskIn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #236880;
  transform: scaleX(0) translateX(0);
  transform-origin: left;
  z-index: 2;
}
.maskIn.displayed::after {
  animation:
    openMask 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards,
    closeMask 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s forwards;
}
@keyframes openMask {
  0% { transform: scaleX(0) translateX(0); }
  100% { transform: scaleX(1) translateX(0); }
}
@keyframes closeMask {
  0% { transform: scaleX(1) translateX(0); }
  100% { transform: scaleX(1) translateX(101%); }
}

/* 初期状態 */
.maskImg::after{
  content:"";
  position:absolute;
  inset:0;
  background:#5aa8a7;
  transform:translateX(-100%);
  z-index:2;
}
.maskImg img{
  display:block;
  width:100%;
  transform:translateX(-100%);
  z-index:1;
  position:relative;
}

.maskImg { --delay: 0s; }
.maskImg.displayed { opacity:1; }
.maskImg.displayed::after{
  animation: viewinMask 1s ease-in-out forwards;
  animation-delay: var(--delay);
}
.maskImg.displayed img{
  animation: viewinImg 1s ease-in-out forwards;
  animation-delay: var(--delay);
}

.maskImg.ready img{
  animation:none;
  transform:translateX(0);
  transition: transform .3s;
}

@keyframes viewinMask{
  0%{transform:translateX(-100%)}
  40%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}
@keyframes viewinImg{
  0%{transform:translateX(-100%)}
  40%{transform:translateX(0)}
  100%{transform:translateX(0)}
}

.maskImg.delay02s{ --delay:.2s; }
.maskImg.delay04s{ --delay:.4s; }
.maskImg.delay06s{ --delay:.6s; }
.maskImg.delay08s{ --delay:.8s; }


/*------------------------------------------------------

	下層ページ

------------------------------------------------------*/

.show_sp { display: none;}
.over_hidden { overflow: hidden;}

/* 下層共通 */
.heading_btmline { font-size: 2.3em; line-height: 1.4; text-align: center; position: relative; padding-bottom: 20px;}
.heading_btmline:after { content: ""; position: absolute; width: 170px; height: 3px; background: #ff7800; bottom: 0px; left: 50%; transform: translateX(-50%);}

.heading_blog { font-size: 2.3em; line-height: 1.4; text-align: center; position: relative; padding-bottom: 30px;}
.heading_blog:after { content: ""; position: absolute; background: url("../images/common/ttl_bg01.png") no-repeat center bottom; background-size: 100% auto; width: 61px; height: 18px; bottom: 0px; left: 50%; transform: translateX(-50%);}

.more_btn a {
	display: inline-block;
	line-height: 1.6;
	color: #3c3c3c;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-align: left;
	box-shadow: 1px 1px 0px #3c3c3c;
	padding: 0.5em 1.5em 0.5em 0.5em;
	min-width: 190px;
	position: relative;
	transition: 0.3s;
}
.more_btn a:after {
	content: "";
	right: 1.3em;
	top: 50%;
	position: absolute;
  width: 0.6em;
  height: 0.6em;
  border-top: 1px solid #3c3c3c;
  border-right: 1px solid #3c3c3c;
  transform: rotate(45deg) translateY(-65%);
}
.more_btn a:hover { background: #236880; box-shadow: none; color: #fff;}
.more_btn a:hover:after { border-color: #fff;}

.img_hover a img, a .img_hover img { transition: 0.3s;}
.img_hover a:hover img, a:hover .img_hover img { transform: translateX(0) scale(1.05);}

.link_pad { padding-top: 200px; margin-top: -200px;}

.page_wrap { padding-bottom: 1px;}

.pagettl { background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 170px 0;}
.pagettl .en_ttl { font-size: 3.2em; letter-spacing: 0.2em; padding-bottom: 0.2em;}
.pagettl .en_ttl:before { content: ""; position: absolute; width: 1em; height: 3px; background: #fff; left: 0; bottom: 0;}


/* ----------------------------
	contact
---------------------------- */

.contact_sec { max-width: 830px; margin: auto;}

.contact_sec dl { display: table; width: 100%; border-bottom: dashed 1px #ccc; padding-bottom: 20px; margin-bottom: 20px;}
.contact_sec dl:last-of-type { border-bottom: none;}
.contact_sec dt, .contact_sec dd {
	display: table-cell;
	vertical-align: middle;
}
.contact_sec dt {
	width: 16.5em;
	font-weight: bold;
}
.contact_sec dt span {
	float: right;
	font-size: 0.7em;
	font-weight: bold;
	color: #fff;
	line-height: 1;
	border-radius: 3px;
	padding: 5px;
	margin-top: 0.4em;
}
.contact_sec dt .hissu { background-color: #FF6467;}
.contact_sec dt .ninni { background-color: #BED4E8;}
.contact_sec dd { padding-left: 20px;}
.contact_sec input[type="text"], .contact_sec input[type="tel"], .contact_sec input[type="email"], .contact_sec textarea, .contact_sec select {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	border: solid 2px #ddd;
	border-radius: 5px;
	padding: 5px;
	width: 100%;
}
.contact_sec select { font-size: 16px; -webkit-appearance: menulist-button; height: 40px; line-height: 40px;}
.contact_sec .width_auto input[type="text"], .contact_sec .width_auto select { width: auto; max-width: 100%;}

.contact_sec .btn_area input { display: inline-block; min-width: 300px; background: #236880; color: #fff !important; border: none; border-radius: 0px; padding: 12px 30px; text-align: center; line-height: 1.6; font-weight: bold; text-decoration: none !important; transition: 0.3s; cursor: pointer; -webkit-appearance: none; font-size: 1.05em; margin: 0px 10px 10px; font-family: 'Noto Sans JP', sans-serif;}
.contact_sec .btn_area input:hover { opacity: 0.7;}
.contact_sec .btn_area input:focus { outline: 0;}

.wpcf7-spinner { display: block; margin: 20px auto;}
.wpcf7-checkbox .wpcf7-list-item { display: block; margin: 0px;}
.wpcf7-not-valid-tip { display: inline-block;}
.label_block .wpcf7-list-item { display: block; margin-left: 0px;}


/* ------------------------
	投稿
------------------------ */

.blog_wrap { border-radius: 30px; padding: 7% 15px;}
.blog_box { display: flex; gap: 6%; max-width: 1200px; margin: auto;}
.contents { flex: 1;}
.rNavi { width: 25%;}

/* archive */
.archive_art { display: flex; justify-content: space-between;}
.archive_art figure { width: 37%;}
.archive_art .box_inner { width: 58%;}
.archive_art:not(:last-child) { border-bottom: solid 1px #ded8d4; padding-bottom: 3em; margin-bottom: 3em;}
.archive_art h1 { border-bottom: solid 1px #236880; font-size: 1.8em; padding: 0 0.5em 0.3em; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;}
.archive_art .text01 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;}
.archive_art .cat_wrap { display: flex; justify-content: flex-end; align-items: center; gap: 1em;}

.blog_subttl { font-size: 2.6em; border-bottom: solid 3px #236880; padding-bottom: 0.3em;}

/* サイドバー */
.rNavi .ttl_box { background: url("../images/blog/side_bg.svg") no-repeat center center; background-size: cover; padding: 1.3em 0.5em; font-size: clamp(0.85em,1.3vw,1em);}
.rNavi .ttl_box .fo_ex { padding-bottom: 0.3em;}
.rNavi .ttl_box .fo_ex:after { content: ""; position: absolute; width: 2em; height: 3px; background: #fff; bottom: 0; left: 50%; transform: translateX(-50%);}
.rNavi .box_inner { padding: 0 1.5em;}

.side_sec01 dl:not(:last-of-type) { margin-bottom: 15px; padding-bottom: 15px; border-bottom: solid 1px #ded8d4;}

.side_sec02 .blog_content a { color: #3c3c3c; text-decoration: none;}
.side_sec02 .blog_content a:hover { color: #236880; text-decoration: underline;}

.side_sec03 select {
	width: 100%;
	border: solid 1px #236880;
	box-shadow: 4px 4px 0px #236880;
	padding: 0 1em;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	background-color: #fff;
	border-radius: 60px;
	-webkit-appearance: menulist-button;
	height: 60px;
	line-height: 60px;
}
.side_sec03 select:focus { outline: none;}

.side_bnr li { margin-bottom: 30px;}
.side_bnr a { display: inline-block; transition: 0.3s;}
.side_bnr a:hover { opacity: 0.7;}

/* 記事ヘッダー */
.blog_header .cat_wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.blog_header .cat_wrap ul { display: flex; gap: 0.5em 1em; flex-wrap: wrap;}
.blog_header .update { border-left: solid 1px #236880; padding-left: 0.5em; margin-left: 0.5em;}

/* 本文 */
.blog_content h2 {
  font-family: "Zen Old Mincho", serif;
	font-weight: 500;
	font-size: 2.3em;
	line-height: 1.5;
	padding-bottom: 0.5em;
	border-bottom: solid 3px #236880;
	clear: both;
	margin-bottom: 30px;
}
.blog_content h2.no_border { padding: 0; border: none;}
.blog_content h2.back { font-family: 'Noto Sans JP', sans-serif; border-bottom: none; background: #236880; color: #fff; padding: 0.2em 1em 0.3em; font-weight: 400; font-size: 2em; position: relative;}
.blog_content h2.back:before { content: ""; position: absolute; left: 0; top: 0; width: 0.5em; height: 0.5em; background: linear-gradient(-45deg,transparent 0%,transparent 50%,#5aa8a7 50%,#5aa8a7 100%);}
.blog_content h3 {
  font-family: "Zen Old Mincho", serif;
	font-weight: 500;
	font-size: 1.8em;
	line-height: 1.5;
	border-left: solid 0.4em #236880;
	padding-left: 0.5em;
	clear: both;
	margin-bottom: 30px;
}
.blog_content h3.back { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; color: #236880; border: solid 1px #236880; background: #fff; border-radius: 2em; padding: 0.1em 1em 0.2em;}
.blog_content h4 {
  font-family: "Zen Old Mincho", serif;
	font-weight: 500;
	font-size: 1.8em;
	line-height: 1.5;
	padding-left: 1em;
	position: relative;
	clear: both;
	margin-bottom: 30px;
}
.blog_content h4:before { content: ""; position: absolute; background: #5aa8a7; width: 0.55em; height: 0.55em; border-radius: 100%; left: 0; top: 0.55em;}
.blog_content h5 {
	font-weight: 500;
	font-size: 1.6em;
	line-height: 1.5;
	border-bottom: solid 1px #236880;
	border-left: solid 1px #236880;
	padding: 0 0 0.4em 0.6em;
	clear: both;
	margin-bottom: 30px;
}
.blog_content h6 {
	font-size: 1.4em;
	font-weight: bold;
	color: #236880;
	line-height: 1.5;
	padding: 0.2em 0.7em;
  background: #fff;
	margin-bottom: 30px;
}
.back_white .blog_content h6 { background: #f9f8f8;}

/* 引用 */
.blog_content blockquote {
	position: relative;
	padding: 4%;
	margin: 70px 0px;
	background-color: #fff;
	border: solid 1px #236880;
  color: #236880;
	clear: both;
}
.blog_content blockquote:before, .blog_content blockquote:after { content: ""; position: absolute; background: url("../images/blog/ico_blq.svg") no-repeat center center; background-size: 100% auto; width: 1.85em; height: 1.5em;}
.blog_content blockquote:before { top: 0; left: 2%; transform: translateY(-50%);}
.blog_content blockquote:after { bottom: 0; right: 2%; transform: scale(-1,-1) translateY(-50%);}
.blog_content blockquote.no_border { border: none; color: #3c3c3c;}
.back_white .blog_content blockquote.no_border, .blog_content .white_box blockquote.no_border { background: #f9f8f8;}
.blog_content blockquote.no_border:before, .blog_content blockquote.no_border:after { display: none;}
.blog_content blockquote cite { font-size: 0.9em; text-align: right; color: #3c3c3c;}

/* リスト */
.blog_content ul { margin-bottom: 30px; clear: both;}
.blog_content ul li { position: relative; padding-left: 1.2em;}
.blog_content ul li:before { content: ""; position: absolute; left: 0px; top: 0.8em; width: 0.6em; height: 0.6em; background-color: #5aa8a7; transform: rotate(45deg);}
.blog_content ul ul { margin-bottom: 0;}
.blog_content ul li li { padding-left: 1em;}
.blog_content ul li li:before { transform: none; background: #236880; width: 0.5em; height: 0.6em; clip-path: polygon(0 0,100% 50%,0 100%);}

.blog_content ul.list_disc li { padding: 0px;}
.blog_content ul.list_disc li:before { display: none;}

.blog_content .list_check li { padding-left: 1.6em; position: relative;}
.blog_content .list_check li:before { content: ""; position: absolute; background: url("../images/blog/ico_check.svg") no-repeat center center; background-size: 100% auto; width: 1.15em; height: 1.1em; left: 0; top: 0.5em; transform: none;}

.blog_content ol { margin-bottom: 30px; padding: 0px; counter-reset:num;}
.blog_content ol li { position: relative; padding-left: 1.6em; list-style: none;}
.blog_content ol li:before { content: counter(num) "."; counter-increment: num; position: absolute; width: 1.2em; height: 1.2em; left: 0; top: 0; color: #236880; font-weight: 700; text-align: right;}

/* テーブル */
.blog_content table {
	clear: both;
	border: solid 1px #236880;
	background: #fff;
	margin: 60px 0px;
	width: 100%;
}
.blog_content th, .blog_content td { padding: 5px 1em;}
.blog_content tbody th, .blog_content tbody td { border: solid 1px #236880;}
.blog_content tbody th { font-weight: bold; color: #236880; background: rgba(35,104,128,0.1);}

.blog_content .table02 table { border: none; background: none;}
.blog_content .table02 th, .blog_content .table02 td { background: none; border: none; padding: 1em; position: relative;}
.blog_content .table02 th { border-bottom: solid 2px #236880; padding-right: 2em;}
.blog_content .table02 td { border-bottom: solid 1px #236880}
.blog_content .table02 tr:first-child th { border-top: solid 2px #236880}
.blog_content .table02 tr:first-child td { border-top: solid 1px #236880}
.blog_content .table02 th:after { content: ""; position: absolute; width: 1em; right: 0px; top: -2px; bottom: -2px; background: #f9f8f8;}
.back_white .blog_content .table02 th:after, .blog_content .back_white .table02 th:after { background: #fff;}

.blog_content iframe { max-width: 100%;}

.blog_content strong { font-weight: bold;}
.blog_content em { font-weight: bold; color: #e53853;}
.blog_content em.green { color: #236880; background: linear-gradient(transparent 75%, #efe700 0%);}

.blog_content a { color: #236880; text-decoration: underline;}
.blog_content a:hover { color: #5aa8a7;}

.blog_content .icon a { background: url("../images/blog/ico_link.svg") no-repeat left 0.3em; background-size: 1em auto; padding-left: 1.5em;}
.blog_content .icon02 a { background: url("../images/blog/ico_link02.svg") no-repeat left 0.3em; background-size: 1em auto; padding-left: 1.5em;}

.blog_content .wp-block-button__link { display: block; min-width: 210px; position: relative; transition: 0.3s; text-align: left; padding: 0.9em 2em 0.9em 1.3em; text-decoration: none !important; line-height: 1.6; color: #3c3c3c !important; font-weight: 500; width: 100%; max-width: 400px; font-size: 1em;}
.wp-block-button__link:hover { transform: translateX(0.5em);}

.wp-block-button:not(.btn02):not(.btn03):not(.btn04):not(.btn05) .wp-block-button__link { color: #236880 !important; border: solid 1px #236880; border-radius: 60px; background: url("../images/common/ico_arrow.svg") no-repeat calc(100% - 1em) center #fff; background-size: 0.5em auto;}
.wp-block-button:not(.btn02):not(.btn03):not(.btn04):not(.btn05) .wp-block-button__link:hover { transform: none; background-color: #236880; background-image: url("../images/common/ico_arrow_white.svg"); color: #fff !important;}
.pdf .wp-block-button__link:before { content: ""; display: inline-block; vertical-align: middle; background: url("../images/blog/ico_pdf.svg") no-repeat center center; background-size: 100% auto; width: 1.05em; height: 1.5em; margin-right: 0.5em; transform: translateY(-0.1em);}
.pdf .wp-block-button__link:hover:before { background-image: url("../images/blog/ico_pdf_white.svg");}

.btn02 a.wp-block-button__link {
  border: none;
  border-radius: 0;
  background: none;
  font-weight: 400;
	letter-spacing: 0.05em;
	box-shadow: 1px 1px 0px #3c3c3c;
	padding: 0.5em 1.5em 0.5em 0.5em;
}
.btn02 a.wp-block-button__link:after {
	content: "";
	right: 1.3em;
	top: 50%;
	position: absolute;
  width: 0.6em;
  height: 0.6em;
  border-top: 1px solid #3c3c3c;
  border-right: 1px solid #3c3c3c;
  transform: rotate(45deg) translateY(-65%);
}
.btn02 a.wp-block-button__link:hover { background: #236880; box-shadow: none; color: #fff !important; transform: none;}
.btn02 a.wp-block-button__link:hover:after { border-color: #fff;}

.btn03 a.wp-block-button__link { border: solid 1px #3c3c3c; background: url("../images/common/ico_cir_arrow.svg") no-repeat calc(100% - 1em) center #fff; background-size: 1.1em auto; padding-right: 2.5em;}

.btn04 a.wp-block-button__link { background: #5aa8a7; max-width: 580px; color: #fff !important; font-size: 1.4em; text-align: center; padding: 1.7em; z-index: 50; border-radius: 0;}
.btn04 a.wp-block-button__link:before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 30%; background: #236880; clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%);}
.btn04 a.wp-block-button__link:after { content: ""; position: absolute; right: 1em; top: 50%; width: 0.7em; height: 0.9em; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateY(-50%);}

.btn05 a.wp-block-button__link { border: solid 1px #3c3c3c; background: url("../images/blog/ico_cir_down.svg") no-repeat calc(100% - 1em) center #fff; background-size: 1.1em auto; padding-right: 2.5em;}
.btn05 a.wp-block-button__link:hover { transform: translateY(0.5em);}

/* tag */
.tag { display: flex; gap: 0.5em 1em; flex-wrap: wrap;}
.tag li a { display: block; text-decoration: none; color: #000; line-height: 1.6; padding: 0.1em 1em; border: solid 1px #3e3431; position: relative;}
.tag li a:before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 12px 0 0;
	border-color: #236880 transparent transparent transparent;
}
.tag li a:hover { opacity: 0.7;}

/*WP用 投稿表示*/
.aligncenter { display: block; margin: 0px auto 20px;}
.alignright { margin: 0px 0 20px 20px; float: right;}
.alignleft { margin: 0px 20px 20px 0; float: left;}

/* ページャー(アーカイブ) */
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5em;}
.pagination .number { margin-right: 2em;}
.pagination span.current, .pagination a {
	display: block;
	text-align: center;
	text-decoration: none;
	min-width: 35px;
	height: 35px;
	line-height: 32px;
	padding: 0px 0.5em;
	background-color: #fff;
	color: #3c3c3c;
  border: solid 1px #969696;
  border-radius: 5px;
}
.pagination span.current, .pagination a:hover { background: #236880; color: #fff;}

/* ページャー(シングル) */
.pager ul { display: flex; gap: 1em; line-height: 1.5; font-size: 1.1em;}
.pager ul li { width: 33.3333%;}
.pager a { text-decoration: none; display: block; border-bottom: solid 1px #236880; padding-bottom: 0.7em; position: relative; color: #236880; font-weight: 500;}
.pager a:hover { opacity: 0.7;}
.pager .previous a:before, .pager .next a:after { content: ""; position: absolute; bottom: 0.2em; width: 1em; height: 1px; background: #236880;}
.pager .previous a:before { left: 0px; transform: rotate(-30deg);}
.pager .next a:after { right: 0px; transform: rotate(30deg);}
.pager .return { border-left: solid 1px #236880; border-right: solid 1px #236880;}

/* 関連記事 */
.blog_related .top_en_btmline { padding-bottom: 0.3em}

/* パンくずリスト */
.breadcrumb { padding: 0.3em 0;}


/* ----------------------------
	固定ページテンプレート
---------------------------- */

.max900 { max-width: 900px; margin-left: auto !important; margin-right: auto !important;}
.max1000 { max-width: 1000px; margin-left: auto !important; margin-right: auto !important;}
.max1100 { max-width: 1100px; margin-left: auto !important; margin-right: auto !important;}
.max1200 { max-width: 1200px; margin-left: auto !important; margin-right: auto !important;}

.width80 { width: 80%; max-width: 800px; margin-left: auto !important; margin-right: auto !important;}

.wp-block-columns table, .wp-block-columns blockquote { margin: 0px !important;}

.white_box, .white_box_wide { position: relative; padding: 6% 0;}
.white_box:before { content: ""; position: absolute; z-index: -1; background: #fff; top: 0; bottom: 0; width: 100vw; max-width: 1400px; left: 50%; transform: translateX(-50%); border-radius: 30px;}
.white_box_wide:before { content: ""; position: absolute; z-index: -1; background: #fff; top: 0; bottom: 0; width: 100vw; left: 50%; transform: translateX(-50%);}

.faq { background: #fff; border-radius: 1em; padding: 1.7em; border: solid 1px #5aa8a7; max-width: 1000px; margin: 0 auto 20px;}
.faq dt > div, .faq dd > div { display: flex; align-items: center; min-height: 3rem; position: relative; padding-left: 4.5rem;}
.faq dt > div:before, .faq dd > div:before { content: ""; position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; background: url("../images/blog/ico_q.svg") no-repeat center center; background-size: 100% auto;}
.faq dt { font-weight: 500; font-size: 1.15em; line-height: 1.8; padding-right: 3em; cursor: pointer; position: relative;}
.faq dt > div:before { top: 50%; transform: translateY(-50%);}
.faq dt:before { content: ""; position: absolute; width: 1.2em; height: 1.2em; right: 0; top: 50%; transform: translateY(-50%); background: #3c3c3c; border-radius: 0.1em;}
.faq dt:after { content: ""; position: absolute; background: url("../images/blog/ico_plus.svg") no-repeat center center; background-size: 100% 100%; right: 0.2em; top: 50%; transform: translateY(-50%); width: 0.8em; height: 0.8em; transition: 0.3s;}
.faq dt.open:after { transform: translateY(-50%) rotate(45deg);}
.faq dd { padding-top: 2em; display: none;}
.faq dd > div:before { background-image: url("../images/blog/ico_a.svg");}

.white_img_box { max-width: 1200px; margin: auto; display: flex; border: solid 1px #236880; background: #fff; padding: 1em; align-items: center;}
.white_img_box.reverse { flex-flow: row-reverse;}
.white_img_box figure { width: 40%;}
.white_img_box .box_inner { flex: 1; padding: 0 6%;}
.blog_content .white_img_box h2, .blog_content h2.line { border: none; position: relative; padding-bottom: 0.3em;}
.blog_content .white_img_box h2:after, .blog_content h2.line:after { content: ""; position: absolute; width: 1.5em; height: 3px; background: #236880; left: 0; bottom: 0;}
.blog_content h2.line.reverse:after { left: auto; right: 0;}

.page_nav { max-width: 1000px; margin: auto;}
.page_nav a { display: block; background: url("../images/common/ico_cir_arrow_white.svg") no-repeat calc(100% - 1em) center #5aa8a7; background-size: 1em auto; font-size: 1.2em; line-height: 1.6; font-weight: bold; text-decoration: none; color: #fff !important; padding: 0.7em 2em 0.7em 1.2em; position: relative; z-index: 50; transition: 0.3s;}
.page_nav a:before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 10em; background: #236880; clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); opacity: 0.5;}
.page_nav a:hover { transform: translateX(0.5em);}

.img_btn { display: flex; background: #fff; border-radius: 1em; padding: 2em; gap: 1.5em; text-decoration: none !important; color: #3c3c3c !important; transform: 0.3s;}
.white_box .img_btn, .white_box_wide .img_btn { background: #f9f8f8;}
.img_btn figure { width: 40%; max-width: 160px;}
.img_btn figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
.img_btn .box_inner { flex: 1; background: url("../images/common/ico_cir_arrow_green.svg") no-repeat right bottom; background-size: 1.75em auto; padding-bottom: 1.8em;}

.figure_box { margin: -3em 2em 0; position: relative; z-index: 50; padding: 1.5em;}
.figure_box.reverse { margin: 0 2em -3em;}
.figure_box .text01 { text-align: center; font-weight: bold; font-size: 1.2em; line-height: 1.6; position: relative; padding-bottom: 1em;}
.figure_box .text01:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 9em; height: 3px; background: #236880;}

.figure_box02 { max-width: 1200px; width: 90%; margin: -10% auto 0; position: relative; z-index: 50; padding: 4%;}

.btmline { font-weight: bold; text-align: center; font-size: 1.05em; line-height: 1.6; position: relative; padding-bottom: 0.7em; margin-bottom: 15px;}
.btmline:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 9em; height: 3px; background: #236880;}

.bg_box { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1300px; margin: 70px auto;}
.bg_box.reverse { flex-flow: row-reverse;}
.bg_box figure { width: 53%; z-index: 50;}
.bg_box figure:before { content: ""; position: absolute; z-index: -1; background: url("../images/blog/box_bg01.svg") no-repeat right center; background-size: auto 100%; top: -70px; bottom: -70px; width: 100vw; right: 30%;}
.bg_box.reverse figure:before { right: auto; left: 30%; background-position: left center;}
.bg_box figure img { border-radius: 1em;}
.bg_box figcaption { background: #236880; display: flex; flex-flow: column; left: 0.7em; top: calc(-1em - 70px); padding: 1em 1.3em; line-height: 1.2; letter-spacing: 0.1em;}
.bg_box.reverse figcaption { left: auto; right: 0.7em;}
.bg_box figcaption:before { content: ""; position: absolute; z-index: -1; background: #175063; width: calc(100% + 1em);  left: -0.5em; top: 0; height: 1em; clip-path: polygon(0 100%, 0.5em 0, calc(100% - 0.5em) 0, 100% 100%, 0 100%);}
.bg_box figcaption .num { font-size: 4em; line-height: 1;}
.bg_box .box_inner { width: 40%;}
.blog_content .bg_box h2 { padding: 0; border: none;}

.step_box01 { max-width: 900px; margin: auto;}
.step_dl { display: flex; align-items: center; gap: 1.5em;}
.step_dl dt { align-self: flex-start; display: flex; justify-content: center; flex-flow: column; border-right: solid 3px #236880; color: #236880; font-size: 0.8em; line-height: 1; letter-spacing: 0.05em; padding: 1em 1.5em 1em 0;}
.step_dl dt .num { font-size: 3.6em; line-height: 1; letter-spacing: 0.07em;}
.step_dl dd { flex: 1; font-size: 1.8em; line-height: 1.6;}
.step_box01 .box_inner { margin: 1em 0 0 6.5em;}
.step_arrow { margin: 2em 0;}

.step_box02 section { display: flex; justify-content: space-between; max-width: 1100px; margin: auto; gap: 5%; position: relative;}
.step_box02 .box_inner02 { width: 60%;}
.step_box02 section > figure { flex: 1;}
.step_box02 section > figure img { border-radius: 1.5em;}
.step_box02 section:not(:last-of-type) { padding-bottom: 80px;}
.step_box02 section:not(:last-of-type):before { content: ""; position: absolute; top: 6em; bottom: 1.2em; width: 1px; left: 1.8em; border-right: dotted 1px #236880;}
.step_box02 section:not(:last-of-type):after { content: ""; position: absolute; background: url("../images/blog/step_arrow.svg") no-repeat center bottom; width: 0.65em; height: 1em; left: 1.55em; bottom: 0.8em;}

.table_wrap { max-width: 1050px; margin: auto !important; font-size: 1.2em; line-height: 1.6;}
.blog_content .table_wrap table { background: none; border: none; margin: 0px;}
.blog_content .table_wrap th { border: none; border-top: solid 2px #236880; background: none; text-align: left; font-weight: 500; width: 6em; padding: 0.5em 0.3em; font-size: 1.15em;}
.blog_content .table_wrap td { border: none; border-top: dotted 1px #c8c8c8; padding: 0.7em 0;}
.blog_content .table_wrap td:first-of-type:not(:first-child), .blog_content .table_wrap td:nth-child(3) { border-top: solid 1px #c8c8c8;}
.blog_content .table_wrap td:nth-last-child(2) { width: 5em; text-align: center;}
.blog_content .table_wrap td span { display: inline-block; vertical-align: middle; background: #5aa8a7; color: #fff; border-radius: 100%; width: 1.8em; height: 1.7em; line-height: 1.7;}

.blog_content .table_wrap.no_month td:last-child { padding-left: 1.5em;}

.metaslider.ms-theme-architekt .flexslider ul.slides .caption-wrap .caption { font-size: 1.2em !important; line-height: 1.6;}


/* top_add */
.mainimage .text_area { font-size: 2.2em; letter-spacing: 0.1em; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.mainimage .text_area .img01 { max-width: 11.5em; margin: auto; margin-bottom: 1em; padding: 0 1em;}
.mainimage .text_area .img01:before { content: ""; position: absolute; width: 100%; height: 50%; border: solid 1px #fff; left: 0; bottom: 0.3em;}