@charset "UTF-8";
@import url("//share.cr-cms.net/hp_agency/hpagency.css");
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
/*------------------------
フラット03ホワイト1カラム
-------------------------*/
/*カラー*/
:root {
  	--font-text:"Zen Kaku Gothic New", sans-serif;
  	--font-head:"Kosugi Maru", sans-serif;
	--color01: #b0c4de;
  	--color02: #F3F1EE;
  	--color03: #E7E9EE;
	--color04: #77726C;
  	--color05: #9CAF90;
  	--color06: #E5BD8F;
    --color07: #9D9D9D;
	--text-color: #333;
	--border-color: #ddd;
}

/*body*/
body{
  	font-size: 16px;
  	color: var(--text-color);
  	font-weight: 400;
  	line-height: 1.8em;
  	font-family:var(--font-text);
  	padding-top: 0;
}
body *{
	box-sizing:border-box;
}

/*link*/
a {
    color: var(--color05);
	text-decoration: none;
	transition:0.3s all;
}
a:hover {
    color: var(--color06);
}
#mainArticles a:hover img, #sideBanners a:hover img, div.freeHtml a:hover img, div.image img.gallery:hover, #title h1 a:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    opacity: 0.80;
}

/*strong*/
strong{
  font-weight:700;
}

/*-------------
Layout
---------------------*/
#wrap {
	max-width: unset;
	min-width: 960px;
  	margin-top: 0;
}

.mainArticles .article {
	padding-bottom: 40px;
	margin-bottom: 40px;
}

#title, #topMenu {
	position: static;
}

/*Title*/
#title_body {
	width: 100%;
}

#title_outer {
	max-width: 100%;
}

/*Contents*/
#mainContents {
	padding: 0;
}

#mainContents_outer {
	width: 100%;
}

#mainArticles_body {
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}

#mainArticles_body > h2 {
	width: 100%;
}

.mainArticles .article_body {
	max-width: 1000px;
}

.mainArticles .article.zero_margin {
	margin-bottom: 0;
	padding-bottom: 0;
}

.mainArticles .article {
	border-bottom: unset;
}

.mainArticles .article.column_5 {
	max-width: calc(1200px / 5);
	@media screen and (max-width:1200px){
		max-width:calc(100% / 3);
	}
}

/*Topics*/
.mainTopics .topics {
	margin-top: unset;
	max-width: 1000px;
	margin: 0 auto 24px;
	padding: 0;
}

/*------------------
Title
----------------------*/
#title {
	padding: 0;
}

#title_body {
	padding-top: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

#title{
  height:120px;
  background:#fff;
}

#title_outer {
    background:#FFF;
    height: 100%;
}

#title_body {
    background: url(/materials/176302225115301.png) no-repeat right #FFF;
    padding: 16px 0 20px;
    background-size: 30%;
}

#title h1 {
    background: url(/materials/176302225998206.png) no-repeat;
    background-size: 360px;
    margin-bottom: 0;
}
#title h1 a {
    display: inline-block;
    height: 83px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    width: 360px;
}
#title .description{
    display:none;
}

/*--------------------------
MainImg
-----------------------------*/
.mainImage #slider li {
        height: auto !important;
}

#mainImage_body #slider img {
	max-width: 100%;
	height: auto !important;
	width: 100%;
}
/*----------------------------
Menu
-------------------------------*/
#topMenu #topMenu_body.topMenu {
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex: 1 0 auto;
}

#topMenu .topMenu li a {
	background: unset;
	font-weight: normal;
	padding: 0;
	text-align: center;
	height: auto;
}

.topMenu::after {
	content: none;
}

#topMenu_outer {
	max-width: unset;
  	box-shadow: unset;
	background: #FFF;
	border-bottom: 1px solid var(--color01);
}

#topMenu .topMenu li {
	width: calc(100% / 5);
	float: unset;
}

#topMenu .topMenu li:hover {
	background: #FFF;
	overflow: unset;
}

#topMenu .topMenu li a {
	position: static;
	transition: 0.2s all;
}

#topMenu .topMenu li a:hover {
	color: var(--color01);
	border-bottom: unset;
	background: unset;
}

#topMenu .topMenu li a::after {
	content: "";
	display: block;
	height: 2px;
	width: 20%;
	background: var(--color01);
	margin: 0 auto;
	opacity: 0;
}

#topMenu .topMenu li a:hover::after {
	opacity: 1;
}
#topMenu .topMenu li a:hover{
height:auto;
}
/*--------------------
Text
-----------------------*/
#mainArticles h2, #mainServices h2, #mainTopics h2, #listTopics h2,
.mainContents .article h3, .mainContents div.gallery h3,
.mainContents .article h4, .mainContents .article h5{
	font-family: var(--font-head);
}

.mainContents .article p {
	margin-bottom: 1.25em;
}

#mainArticles h2,  #listTopics h2{
	font-size: 36px;
	background: unset;
	border: unset;
	color: var(--color04);
	padding: 90px 0;
}

.mainContents .article h3, .mainContents div.gallery h3 {
	background: unset;
	border: unset;
	color: var(--color04);
	font-size: 28px;
	padding-left: 0;
	padding-top: 0;
  	text-align: center;
}

.mainContents .article h4 {
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 0.5em;
	border-left: 6px solid var(--color01);
	padding: 4px 0 4px 8px;
	color: var(--color04);
  font-weight: 500;
}

/*----
Gallery
----*/
.gallery_grid li.galleryGrid .comment {
	text-align: center;
	line-height: 1.5;
}
/*------------------------
Topics
-------------------------*/
#mainTopics .topics h3,
.mainTopics .topics li h3{
	font-size: 18px;
	/* color: var(--text-color); */
}

.mainTopics .topics li h3 a {
	color: var(--color04);
	font-size: 20px;
}

.mainTopics .topics li h3 a:hover {
	color: var(--color05);
}

#mainTopics .topics li .date,
.mainTopics .topics li .date{
	font-size: 14px;
	background: #F5F5F5;
	width:fit-content;
	padding:4px;
	color:var(--text-color);
	border-radius:4px;
    float: left;
}

.mainTopics .topics li .date{
	margin-bottom:8px;
}

#mainTopics .topics .description,
.mainTopics .topics li .description{
	font-size: 14px;
	color: var(--color04);
}

.mainTopics .topics li .description{
	margin-top:8px;
}

#mainTopics .topics li .more a,
.mainTopics .topics li .more a{
	font-size: 14px;
	background: var(--color03);
	text-align: center;
	color: Var(--text-color);
	padding: 4px 8px;
	border-radius: 4px;
}

#mainTopics .topics li .more a:hover,
.mainTopics .topics li .more a:hover{
	background:var(--color01);
	color:#FFF;
}

#mainTopics .topics li .more {
	width: fit-content;
	/* margin-left: auto; */
	/* position: static; */
	font-size: 14px;
	padding-right: 0;
}

#mainTopics .topics h3 a {
	color: var(--text-color);
}

#mainTopics_body {
	padding: 50px 40px;
	background: #F5F5F5;
    margin-bottom: 80px;
  　margin-top: 70px;
}

#mainTopics h2 {
	background: unset;
	color: var(--color04);
	border-bottom: unset;
	border-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 32px;
}

#mainTopics .topics li {
	background: #FFF;
	padding: 12px 16px;
	border-bottom: 2px dotted #EEE;
	border-radius: 4px;
}

#mainTopics .listview a {
	margin-top: 0;
	width: fit-content;
	padding: 8px 16px;
	margin: 0 auto;
	background: #F5F5F5;
	border-radius: 4px;
	color: var(--color04);
}

#mainTopics .listview a:hover {
	background: var(--color01);
	text-decoration: none;
	color: #FFF;
}

#mainTopics .topics li .more a:hover {
	background: var(--color01);
	color: #FFF;
}

#mainTopics .topics h3 a:hover {
	color: var(--color04);
}

/*-----------------------
5column
----------------------*/
.mainContents .article.column_5 h3 {
	font-size: 18px;
	text-align: center;
	line-height: 1.2;
	min-height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mainArticles .article.column_5 {
	margin-bottom: 100px;
	padding-bottom: 0;
}

.mainArticles .article.column_5 .article_body {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	background: var(--color02);
	padding-top: 24px;
	border-radius: 4px;
}

.mainArticles .article.column_5 img {
	margin-bottom: 0;
}

.mainContents .article.column_5 p {
	text-align: center;
}

/*---Contact--*/
ul.linklist {
	display: flex;
	gap: 40px;
	justify-content: center;
}

ul.linklist li {
	flex-grow: 1;
  	max-width: 40%;
}

ul.linklist li a {
	display: flex;
	justify-content: center;
	font-size: 130%;
	font-weight: 600;
	color: #FFF;
	padding: 16px;
	border-radius: 4px;
}

ul.linklist li a:hover{
	opacity:0.8;
}


ul.linklist li a.tel {
	background: var(--color05);
}

ul.linklist li a.freedial {
	background: var(--color06);
}


.mainArticles .article.access {
	background: url(/materials/176309015276601.jpg) center no-repeat;
	padding:0;
	text-align:center;
	border-radius:4px;
}

.mainArticles .article.access  .article_outer{
	background:#FFFB;
	backdrop-filter:blur(1px);
	padding:40px;
}

ul.list {
	overflow: hidden;
}

/*----------------------
Side & Footer
--------------------------*/
#sideContents {
	background: var(--color02);
}

#sideContents_outer {
	padding: 48px 0;
}

.side_info {
	display: flex;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
}

.side_info table {
	border-collapse: collapse;
	line-height: 1.3;
}

.side_info table th, .side_info table td {
	padding: 8px 16px;
	vertical-align: text-bottom;
}

.side_info table th {
	border-bottom: 1px solid var(--color04);
	border-right:none;
}

.side_info table td {
	border-bottom: 1px solid #ccc;
	border-top: none;
	border-right: none;
	border-left:none;
}

.freeHtml .side_info img {
	width: unset;
	max-width: 360px;
}

.footer .topMenu {
	display: flex;
	justify-content: center;
	gap: 2em;
}

.footer .topMenu li {
	float: none;
	text-align: center;
	/* min-width: 10%; */
	margin-right: unset;
}

/*------------
Editor
----------------*/
.ams-build #wrap{
	margin-top:0;
}

body.ams-build{
	padding-top:0;
}

.ams-build #title,
.ams-build #topMenu{
	position:static;
}
.ams-build #title{
	order:1;
}

.ams-build #wrap_body {
	display: flex;
	flex-direction: column;
}

.ams-build #wrap_body #title {
	order: 1;
}

.ams-build #wrap_body #mainImage {
	order: 3;
}

.ams-build #wrap_body #topMenu {
	order: 2;
}

.ams-build #wrap_body #contents {
	order: 4;
}

.ams-build #wrap_body #footer {
	order: 5;
}

/*-------------------------------------------
table
-------------------------------------------*/
.article table p {
    margin: 0;
}
.article table:not(.contactTable) {
    border-collapse: collapse;
    border-left: 1px solid #ccc;
    border-spacing: 0;
    border-top: 1px solid #ccc;
    margin: 10px auto;
}
.article table:not(.contactTable) td,
.article table:not(.contactTable) th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
}
.article table:not(.contactTable) th {
    background-color: #f7f7f7;
    text-align: center;
}

/*schedule*/
.article table.schedule {
	width: 100%;
	margin: 0 auto;
	border-left:none;
	border-top: none;
}

.article table.schedule th, .article table.schedule td {
	text-align: center;
	border-right:none;
	border-color: var(--border-color);
}

.article table.schedule th:first-child{
	width:25%;
}

.article table.schedule th{
	width:calc(75% / 7);
}

.article table.schedule thead th{
	background: #FFF;
}

.article table.schedule thead th:first-child{
	color:var(--color06);
}

.article table.schedule tbody th{
	background: #FFF;
}

.article table.flow {
	width: 100%;
	border: none;
	counter-reset: flow 0;
}

.article table.flow tbody {
	display: flex;
	flex-direction: column;
}

.article table.flow tbody tr {
	display: flex;
	flex-direction: column;
	position: relative;
	border-bottom: 4px solid var(--color01);
	margin-bottom: 45px;
}

.article table.flow tbody tr:last-child {
	margin-bottom: 0;
}

.article table.flow th, .article table.flow td {
	border-right: none;
	border-bottom: none;
}

.article table.flow th {
	border-bottom: 2px dotted #DDD;
	text-align: left;
	font-size: 110%;
	display: flex;
	align-items:center;
	background: none;
}

.article table.flow th::before{
	counter-increment:flow;
	content:"STEP." counter(flow, decimal-leading-zero) " ";
	margin-right:0.5em;
	padding: 4px 8px;
	font-size:70%;
	background:var(--color01);
	color: #FFF;
	line-height: 1em;
}

.article table.flow tbody tr::after {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	border-right: 4px solid var(--color01);
	border-bottom: 4px solid var(--color01);
	position: absolute;
	transform:rotate(45deg);
	bottom: -23px;
	left:15%;
	background:#FFF;
}

.article table.flow td {
	padding-bottom: 28px;
}

.article table.flow tbody tr:last-child::after {
	content:none;
}

.article table.profile {
	width: 80%;
	border-top: 0;
	border-left: 0;
}

.article table.profile td {
	border-right: none;
	padding: 8px 16px;
	border-bottom-style: dotted;
	border-width: 2px;
}

table.normalTbl {
	border-top: 0;
}

.article table.normalTbl {
	border-top: none;
	border-left: none;
}

.article table.normalTbl td, .article table.normalTbl th {
	border-right: none;
	padding-left:16px;
	padding-right:16px;
}

.article table.normalTbl th{
	background:var(--color02);
	font-weight:normal;
	border-bottom:1px solid var(--color04);
}

.article table.normalTbl td{
	border-bottom:var(--border-color) 1px solid;
}
/*-------------------------------------------
List
-------------------------------------------*/
/******noticelist******/
ol.pp {
margin-top: 1.5em;
padding-left: 2em;
}
ol.pp li {
list-style-type: decimal;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 12px;
}
ul.notes {
list-style-type: none;
margin-left:1em;
}
ul.notes li {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 12px;
}
ul.notes li::before {
content: "◆";
margin-left: -1em;
}
ul.ps {list-style-type: none;margin-left:1em;margin-bottom: 20px;}
ul.ps li::before {
content: "※";
margin-left: -1em;
}
ul.maru {
font-size: 16px;
list-style-type: none;
margin-left:1em;
}
ul.maru li::before {
content: "●";
margin-left: -1em;
}

ul.list li {
	padding: 4px 0 4px 16px;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

ul.list li::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 100%;
	display: block;
	background: var(--color01);
}

ul.list li strong{
	color: var(--color04);
}

.sideMobile p {
	font-size: 14px;
}

/*追加CSS*/
.mainContents .article h3, .mainContents div.gallery h3 {
    font-weight: 100;
}

#mainArticles h2, #mainServices h2, #mainTopics h2, #listTopics h2 {
    font-weight: 100;
}

.mainArticles .article img {
    max-width: 90%;
}

.mainContents .article h3, .mainContents div.gallery h3 {
    margin: 0 auto 40px;
}

.onlysp{
  display:none;
}

.mainArticles .article_right .image {
    margin: 0 0 0 60px;
}