@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');

/*-------------------------------------------
テンプレート
レスポンシブ02パープル
-------------------------------------------*/
:root {
    --main-color: #2a5caa;
    --base-color: #cfc6e2;
    --point-color: #846ba1;
    --head-color: #514148;
  	--text-color: #361700;
  	--text-size-S:0.833rem;
	--text-size-M:1rem;
}

html {
	font-size: 18px;
}

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/176887406154901.png") no-repeat center left;
  background-size: 100%;
  height:100px;
  width: 510px;
}
#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/157639245698001.jpg") no-repeat right center;
  background-size: 335px;
}
.slick-slide {
    height: auto !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/175445575582801.jpg) center right -12vw no-repeat;
	background-attachment: fixed;
	/* padding: 0; */
	text-align: left;
	font-size: 110%;
	background-size: 1200px;
}

.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;
}

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

.article.intro h3::after {
	width: 100%;
	height: 3px;
}

.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;
}
ul.topics li h3 a {
    color: #007db8;
}
.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;
}

/*サービス*/
.servicetitle {
    background-color: #f6a749;
    color: #fff;
    font-weight: normal;
    font-size: 16px;
}
.gallery.servicephoto ul.galleryGrids .comment {
    text-align: left;
}
.gallery.servicephoto ul.galleryGrids .comment .servicetitle {
    text-align: center;
}

/*-----------------------------
お問い合わせ
--------------------------------*/
.article.contact {
	background: url(/materials/175445844360802.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;
}
/*-------------------------------------------
テーブル
-------------------------------------------*/
table.flow.mini {
    width: 100%;
}

/*-------------------------------------------
サイト案内
-------------------------------------------*/
.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);
}
}/*サイト案内-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;
}
/* 上部サイドメニュー非表示 */
div#sideServices {
    display: 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%;
    }
}