@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&family=Shippori+Antique&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");
/*-------------------------------------------
テンプレート
レスポンシブ02パープル
-------------------------------------------*/
:root {
    --main-color: #705da8;
    --base-color: #cfc6e2;
    --point-color: #846ba1;
    --head-color: #514148;
  	--text-color: #361700;
  	--text-size-S:0.833rem;
	--text-size-M:1rem;
}

html {
	font-size: 17px;
}

body{
  /*line-height:1.8;
  font-family: "Zen Maru Gothic", serif;
  font-weight:500;
  
  font-family: "Shippori Antique", sans-serif;
  font-weight: 400;
  font-style: normal;*/
  font-family: "M PLUS 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/*-----------------
title
--------------------*/
#wrap_body #title, #wrap_body #title_outer {
  padding:10px 0;
}
#title h1 {
  background: url("/materials/0000305408.png") no-repeat center left;
  background-size: 100%;
  height: 64px;
  width: 356px;
}
#title h1:hover {
  opacity: 0.7;
}
#title h1 a {
  display: inline-block;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  height: 100%;
  width: 100%;
}
#title h1 {
    margin: 10px;
}
#title #title_outer {
  background: url("/materials/0000304498.png") no-repeat right center;
  background-size: 370px;
}

/* maru02→3列調整 */
ul.maru02 li {
    width: 30% !important;
    margin-bottom: 8px;
    line-height: 1.6;
    font-weight: bold;
    border-bottom: dotted 1px #dddddd;
    padding-bottom: 8px;
    padding-left: calc(1em + 8px);
}
@media screen and (max-width:600px){
  ul.maru02 li {
    width: 48% !important;
  }
}
/*-----------------
btn
--------------------*/
a.btn:hover {
    background: #cfc6e2;
}
a.btn {
    color: #fff;
    background: #705da8;
    display: block;/*inline*/
}
a:hover {
    color: #3693d0;/*fff*/
}

/*-----------------
btn_inline
--------------------*/
a.btn_inline:hover {
    background: #cfc6e2;
}
a.btn_inline {
    color: #fff;
    background: #705da8;
    display: inline;
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    box-sizing: border-box;
}

/*-----------------
intro
--------------------*/
.article.full.intro {
	background: url(/materials/175031703759801.jpg) center right -35vw no-repeat;/*-12vw*/
	background-attachment: fixed;
	/* padding: 0; */
	text-align: left;
	font-size: 110%;
	background-size: 1200px;/*1100px*/
}

.article.full.intro .article_outer {
	background: rgb(255,255,255,0.2);
	padding-top: 80px;
	padding-bottom: 80px;
}

.article.intro .article_body.article_right {
	margin-left: 4%;
	background: rgb(255, 255, 255, .7);
	padding: 40px;
}
/*-------------------------------------------
commitment
-------------------------------------------*/
.article.max.comm {
margin-bottom: 0;
padding: 0 0 80px;
background: var(--gradient);
}
.article.max.comm.commEnd {
margin-bottom: 64px;
}
.article.max.comm .article_body {
max-width: 1280px;
width: 100%;
display: flex;
position: relative;
margin: auto;
}
.article.max.comm .article_body.article_left {
justify-content: flex-end;
}
.article.max.comm .article_body.article_right {
justify-content: flex-start;
}
.article.comm .image {
position: absolute;
top: 0;
}
.article.max.comm .article_body.article_left .image {
right: 50%;
margin-right: -100px;
}
.article.max.comm .article_body.article_right .image {
left: 50%;
margin-left: -100px;
}
.article.comm .commTxt {
z-index: 2;
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
min-height: 470px;
margin: 40px 0 0;
padding: 64px;
background: rgba(240, 240, 240, 0.8);
box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.4);
}
.mainArticles .article.max.comm .article_right .image, .mainArticles .article.max.comm .article_left .image {
width: 100%;
max-width: 880px;
}
.mainArticles .article.max.comm .article_right .image img, .mainArticles .article.max.comm .article_left .image img {
width: 100%;
}

.article.max.comm.comm01 .article_body.article_left .image {
right: 50%;
top: 80px;
max-width: 80%;
}
.article.comm.comm01 .commTxt {
width: 60%;
}
.article.max.comm.comm02 .article_body.article_right .image {
left: 50%;
max-width: 1000px;
margin-left: -1vw;
}
.article.comm.comm03 .commTxt {
margin-top: 80px;
}
.article.max.comm.commEnd .article_body {
display: block;
max-width: 100%;
}
.article.comm.commEnd .image {
position: relative;
width: 100%;
}
.article.comm.commEnd .commTxt {
position: relative;
margin: -370px auto 0;
min-height: auto;
width: 400px;
right: -240px;
}
  
@media only screen and (width < 1280px) {
.article.max.comm.comm02 .article_body.article_right .image {
max-width: 80%;
}
}

@media only screen and (width < 800px) {
.article.max.comm .article_left, .article.max.comm .article_right {
padding: 0;
}
.mainArticles .article.max.comm .article_right .image, .mainArticles .article.max.comm .article_left .image {
width: 100%;
max-width: 100%;
}
.mainArticles .article.max.comm {
padding-left: 4%;
padding-right: 4%;
}
}

@media only screen and (width < 768px) {
.article.max.comm .article_body {
flex-direction: column;
max-width: 100%;
}
.article.max.comm .article_body .image {
max-width: 100% !important;
top: unset;
right: unset;
left: unset;
position: static;
margin: 0 !important;
}
.article.max.comm .article_body .commTxt {
display: block;
width: 100%;
min-height: unset;
position: static;
margin: 0;
padding: 4vw;
box-shadow: unset;
}
.article.max.comm {
padding-bottom: 40px;
}
}

#mainArticles h2, #listTopics h2 {
  font-size: 1.5em;
}

/*-------------------------------------------
サイト案内
-------------------------------------------*/
.article.intro h3 {
	text-align: left;
	margin-top: 0;
}

.article.intro h3::after {
	width: 100%;
	height: 3px;
}
.mainContents .article h3 strong,
.mainContents div.gallery h3 strong,
#mainServices h2 strong,
#mainTopics h2 strong {
  font-size: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    font-weight: normal;
    /*border: solid 1px #b4b4b4;*/
  margin-top: 0.1em;
}
.mainContents .article h3 strong:before,
.mainContents div.gallery h3 strong:before,
#mainServices h2 strong:before,
#mainTopics h2 strong:before {
  content: "";
  display: block;
  height: 0px;
  width: calc(100% + 20px);
  /*background: #ffffff;*/
  margin-top: -5px;
}
.mainContents .article h3 strong:after,
.mainContents div.gallery h3 strong:after,
#mainServices h2 strong:after,
#mainTopics h2 strong:after {
  content: "";
  display: block;
  height: 3px;
  width: calc(100% + 20px);
  /*background: #ffffff;*/
  margin-bottom: -2px;
}

.mainContents .article h3:after,
.mainContents div.gallery h3:after,
#mainServices h2:after,
#mainTopics h2:after {
  /*content: none;*/
  content: ".";
  display: inline-block;
  width: 0;
  color: transparent;
  pointer-events: none;
  margin: 0;
  margin-right: -0.3em;
  height: 0;
}
.mainContents .article h3:last-child,
.mainContents div.gallery h3:last-child,
#mainServices h2:last-child,
#mainTopics h2:last-child {
  margin-bottom: 0.3em;
  padding: 10px 0;
  line-height: 1.85;
  font-size: 1.65em;/*1.95em;*/
}
/*
.article h3 a, .gallery h3 a, .article h3 a:hover, #mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3, .article h4 {
    color: var(--head-color);
}
#mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3 {
    text-align: left;
    line-height: 1.4em;
}
#mainTopics h2::after, #mainArticles .article h2::after,
.article h3::after, .gallery h3::after, .freeHtml h3::after {
    margin: 10px 0 20px;
    background: none;
    border-bottom: dotted 8px var(--main-color);
  }
#mainTopics h2::after, #mainArticles .article h2::after, .article h3::after, .gallery h3::after, .freeHtml h3::after {
    margin: 12px 0 20px 6px;
    background: none;
    border: none;
    content: '● ● ●';
    width: auto;
    line-height: 1em;
    height: 1em;
    font-size: 12px;
    color: var(--main-color);
}
#mainArticles .article_body h2 strong {
    display: block;
    line-height: 1.2em;
    color: var(--main-color);
    font-size: .7em;
    background: none;
    border: none;
}
#mainArticles div[id^="blog"] h2 {
    margin: 30px 0 0;
}
*/
.mainContents .article h4 {
    border: none;
    border-radius: unset;
    font-size: 1.4em;
    padding: 10px 0 8px;
    padding-left: 38px;
    margin: 16px 0;
    position: relative;
    background: none;
}
.article h4::before {
    font-family: "Font Awesome 5 Free";
    content: "\f5ad";
    font-weight: bold;
    background: linear-gradient(-90deg, var(--main-color) 20%, var(--point-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: auto;
    height: 32px;
    top: .5em;
    bottom: unset;
}
.mainContents .article.flow h4 {
    border-bottom: solid 1px #b29da6;
}
.article h5 {
    border: none;
    border-bottom: solid 1px;
    padding: 6px 0;
    margin: 0 0 18px;
    font-size: 1.2em;
    letter-spacing: .1em;
    color: var(--point-color);
}

.article h6 {
    background: #FFF;
    color: #555;
    font-size: 1.1em;
    border-radius: 40px;
    padding: 8px 20px 8px 44px;
    margin-bottom: 18px;
    line-height: 1.4em;
    position: relative;
}
.article h6:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c6";
    font-weight: bold;
    margin-right: 6px;
    transform: unset;
    color: var(--point-color);
    position: absolute;
    left: 18px;
}
.article.envelope h6,
table#flowTbl h6 {
    padding-left: 22px;
    margin: 0;
}
.article.envelope h6::before,
table#flowTbl h6::before {
    left: 0;
}

/*-----------------------------
お問い合わせ
--------------------------------*/
.article.contact {
	background: url(/materials/175074882695501.jpg) center no-repeat;
	padding: 0;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 0;
}

.article.contact .article_body {
	background: rgb(255,255,255,.8);
	padding: 40px;
}

.article.contact .article_outer {
	background: rgba(255,255,255,.5);
	padding: 40px;
}

.article.contact h3 {
	margin-top: 0;
	padding-top: 0;
}

.article.contact a.tel {
	font-size: 2.369rem;
	font-weight: 600;
	text-decoration: none;
}

.article.contact a.tel::before {
	content: "\f095";
	font-family: "Font Awesome 5 Free";
	font-size: 1.777rem;
	transform: scaleX(-1);
	display: inline-block;
	margin-right: 0.5em;
}

.article.contact a:hover {
    color: #666;
}
.article.contact a.mail {
	font-size: 1.777rem;
	font-weight: 300;
	text-decoration: none;
}

/*-------------------------------------------
サイト案内
-------------------------------------------*/
.gallery.siteLink {
  background: #cfc6e2;
  margin-top: 0;
  margin-bottom: 0;
  padding: 2em 2em;
  max-width: inherit;
  width: 100%;
}
.gallery.siteLink .article_body {
  max-width: 1200px;
  margin: auto;
}
.gallery.siteLink .galleryGrids {
  display: flex;
  justify-content: center;
  height: inherit !important;
  flex-wrap: wrap;
}
.gallery.siteLink .galleryGrids li.galleryGrid {
  width: 31%;
  padding:0;
  margin: 0.8% 0.8%;
  position: relative !important;
  top: inherit !important;
  left: inherit !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery.siteLink .gallery_grid li.galleryGrid .galleryGrid_outer {
  padding: 0;
}
.gallery.siteLink .galleryGrid_body {
  max-width: inherit;
  background: #ffffff;
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 4px;
}
.gallery.siteLink .image {
  margin-bottom: 0 !important;
}
#mainArticles .gallery.siteLink .image img {
  border-radius: 4px 4px 0 0;
}
.gallery.siteLink .comment {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: flex-start;
  padding: 0.5em 3em 0.5em 1em;
  width: 100%;
  border-radius: 0 0 8px 8px;
  color: #444444;
  min-height: 5em;
  font-size: 0.9em !important;
  text-align: left !important;
}
.gallery.siteLink .comment::before {
  content: "";
  background: #705da8;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 1em;
}
.gallery.siteLink .comment::after {
  content: "";
  position: absolute;
  right: 1.6em;
  display: block;
  width: 0.4em;
  height: 0.4em;
  border-top:solid 1px #ffffff;
  border-right:solid 1px #ffffff;
  transform: rotate(45deg);
}
@media only screen and (max-width: 600px) {
  .gallery.siteLink {
    padding: 1em 0 !important;
    margin: 0 !important;
  }
  .gallery.siteLink .galleryGrids {
    /*flex-direction: column;*/
    margin: 0 2%;
  }
  .gallery.siteLink .galleryGrids li.galleryGrid {
    width: 49% !important;
    padding: 2%;
    margin: 0 auto 1%;
  }
  .gallery.siteLink ul.galleryGrids .comment {
    font-size: 0.8em;
    padding: 0.5em 2em 0.5em 0.8em;
    text-align: left;
  }
  .gallery.siteLink .comment::before {
  width: 1em;
  height: 1em;
  right: 0.5em;
}
.gallery.siteLink .comment::after {
  content: "";
  position: absolute;
  right: 0.9em;
  display: block;
  width: 0.3em;
  height: 0.3em;
  border-top:solid 1px #ffffff;
  border-right:solid 1px #ffffff;
  transform: rotate(45deg);
}
}
/*250919中山追記*/
ul.guide {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

ul.guide li {
    flex-basis: calc((100% / 3) - .5em);
    margin: .25em;
}
ul.guide li a {
    background: var(--main-color);
    display: inline-block;
    padding: 8px;
    width: 100%;
    color: white;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    border-radius: 0;
    line-height: 2.5;
    transition: 0.3s all;
    border: 2px solid var(--main-color);
  	border-radius:5px;
}
ul.guide li a:hover {
    background:white;
    color: var(--main-color);
}
ul.guide li a:after {
    font-family: "Font Awesome 7 Free";
    content: "\f105";
    font-weight: bold;
    margin-left: 10px;
}
@media screen and (max-width:600px) {
    ul.guide {
  		flex-direction: column;
  	}
}/*サイト案内-END-*/

/*----------------------
Side & Footer
-------------------------*/
#mainContents {
	padding-bottom: 0;
}

#sideContents {
	background: var(--main-color);
}

#sideContents_outer {
	width: 100%;
}

.sideContents #sideServices,
 .sideContents #sideBlogCategories, .sideContents #sideBlogDates{
	width: 100%;
}

.sideContents #sideServices #sideServices_outer,
 .sideContents #sideBlogCategories #sideBlogCategories_outer, .sideContents #sideBlogDates #sideBlogDates_outer{
	max-width: 1024px;
	margin: 0 auto;
}

#sideServices ul,
.sideContents #sideBlogCategories ul{
	display:flex;
	gap:2em;
	flex-wrap: wrap;
	justify-content: flex-start;
}

div#sideBlogDates_body {
	display: flex;
	flex-wrap:wrap;
	
}

.sideContents #sideBlogDates h2 {
	width: 100%;
}

.sideContents dl {flex-wrap: wrap;}

.sideContents dd {
	width: 78%;
	margin-bottom: 1.5em;
}

.sideContents dl,
.sideContents dl ul{
	display:flex;
	flex-wrap:nowrap;
	justify-content: flex-start;
	gap: 2%;
}

.sideContents .sideMobile p{
	color:#FFF;
}

.sideContents dl {
	flex-wrap: wrap;
}

.sideContents dl ul{
	flex-wrap:wrap;
	gap:0;
}

#sideServices ul li,
.sideContents ul li, .sideContents dl dt, .sideContents dl{
	border-top:none;
}

.sideContents ul li a, .sideContents dt a{
	color:#FFF;
}

#sideServices ul li a{
	font-size:var(--text-size-S);
}

.sideContents #sideServices h2, .sideContents #sideBlogCategories h2, .sideContents #sideBlogDates h2, .sideContents #sideMobile h2 {
	font-size: var(--text-size-M);
	color: #FFF;
}

.sideContents #sideServices h2:before, .sideContents #sideBlogCategories h2:before, .sideContents #sideBlogDates h2:before, .sideContents #sideMobile h2:before{
	background:var(--base-color);
}

.sideContents {
	justify-content: center;
	padding-bottom: 0;
}

.sideContents dl dt {
	width: 20%;
}

.sideContents dd ul{
	flex-wrap:wrap;
}

.sideContents dd ul li {
	width: calc(100% / 4);
}

.sideContents dl ul li a {
	padding: 8px;
}

.sideContents dt a {
	font-size: var(--text-size-S);
}

.side_info {
	width: 100%;
	max-width: 1024px;
	margin: 40px auto 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2em;
	background: #FFF;
	padding: 40px;
	border-radius: 8px;
}

.side_info .left h2 img {
	max-width: 240px;
}

.side_info table {
	border-top: 1px solid var(--text-color);
	width: 100%;
}

.side_info table th, .side_info table td {
	border-bottom: 1px solid var(--text-color);
	padding: 4px 8px;
	line-height: 1.5;
}

.sideContents .side_info ul li a:before {
	content: none;
}

/*--------------
Responsive
------------------------*/
/*1200px以下*/
@media screen and (max-width:1200px) {
	#mainImage::after {
		left: 40%;
		background-position: center;
		transform: unset;
		top: 0;
	}
  
  .article.full.intro .article_outer {
	padding-top: 0px;
	padding-bottom: 0;
}

.article.full.intro {
	padding-left: 0;
	padding-right: 0;
    background-size: 650px;
}

.article.intro .article_body.article_right {
	margin-left: 0;
}

.article.contact .article_outer {
	padding: 20px;
}
    
}/*1200px以下ここまで*/

/*1024px以下*/
@media screen and (max-width:1024px){

#title #title_outer {
        background: none;
}

#mainTopics #mainTopics_body {
	display: flex;
	flex-wrap: wrap;
}

#mainTopics #mainTopics_body ul.topics {
	justify-content: center;
	flex-wrap: wrap;
}
  
#mainTopics #mainTopics_body h2 {
	border-right: none;
}

 #mainTopics #mainTopics_body {
    display: flex;
    flex-direction: column;
}

#mainTopics #mainTopics_body h2 {
    margin-bottom: 1em;
    border-right: none;
}

#mainTopics #mainTopics_body ul.topics {
    flex-direction: column;
    justify-content: flex-start;
}

#mainTopics #mainTopics_body ul.topics li {
    width: 100%;
    border-right: none;
    justify-content: flex-start;
    min-height: unset;
    border-bottom: 1px dashed #CCC;
}

ul.topics li .thumb {
	max-width: 50%;
	margin: 0 auto;
}
  
  ul.linklist li {
	width: calc(94% / 2);
	margin-bottom: 12px;
}
  
  #footer_body .topMenu, #footer_body .services {
	justify-content: flex-start;
}
  
  .side_info {
	flex-direction: column;
	align-items: center;
}
  
}
/*1024px以下ここまで*/

@media screen and (max-width:600px){
/* 画面下部固定のリンクパーツ */
#bottomLink{
  display: block;
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  text-align:center;
  z-index:1000;
  height:45px;
  overflow:hidden;
}

#bottomLink a {
  display: block;
  padding: 0;
  color: #FFF !important;
  background: var(--main-color);
  text-decoration: none;
  font-size:16px;
  line-height: 45px;
  height:100%;
  border-top: 2px solid #FFF;
}
#bottomLink a span{
  font-size:14px;
  display: inline-block;
}
#bottomLink a span::after{
  	content: "\f095";
  	font-family: "Font Awesome 5 Free";
  	transform: scaleX(-1);
  	display: inline-block;
  	margin-right: 0.5em;
  	font-weight: bold;
  	margin-left: 0.5em;
}
}
/* ボタンサイズ分の画面下部余白 */
#wrap {
  	margin-bottom: 45px;
}

/*スマホ版余白調整*/
@media only screen and (max-width: 1024px) {
    .article.full, .article.max {
        margin: 0 0 10px;
        width: 100%;
        flex-basis: 100%;
    }
}