@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=Noto+Sans+JP&display=swap');
@import url("//use.fontawesome.com/releases/v5.6.1/css/all.css");
/*-------------------------------------------
テンプレート
フラット02 ピンク
-------------------------------------------*/
/*カラー*/
:root {
    --primary-100:#efcbd2;
    --primary-200:#dd8192;
    --primary-300:#a34d60;
    --accent-100:#9bdeac;
    --accent-200:#005b4a;
  	--accent-300:#d60031;
    --text-100:#000;
    --text-200:#5e3e26;
    --bg-100:rgba(255, 255, 255, 0.7);
    --bg-200:#f7efef;
    --bg-300:;
  	--font-serif: "Lusitana", "Siippori Mincho", serif;
  	--link: #61a050;
  	--link-hover: #93ad8c;
}

html {
	scroll-behavior: smooth;
    transition: 0.5s all;
}

body {
    font-size: 18px;
    line-height: 1.8;
  	color:var(--text-100);
    font-weight: normal;
    letter-spacing: 0.5px;
}
#wrap {
    background: url(/materials/174788365816501.jpg);
    background-attachment: fixed;
}
.article a {
    text-decoration: none;
    color: var(--link);
}
.article a::hover {
	text-decoration: none;
  	color: bar(--link-hover);
}
.article p, .gallery p {
    margin: 2em 4% 1em;
}

@media only screen and (max-width: 600px) {
  body{
    font-size:16px;
  }  
}
  .article.full.zero_margin, .article.max.zero_margin {
	margin-bottom: 0 !important;
	}
/* 見出し */
#title h1 {
    background: url(/materials/174822811555802.png) no-repeat center;
    background-size: contain;
    height: 160px;
    width: 416px;
}

#title h1 a {
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
	display: block;
	height: inherit;
}

#title #title_outer {
    background: url(/materials/174831499263002.png) right center no-repeat;
    background-size: 320px;
    margin: auto;
    padding: 0;
    height: 160px;
    display: flex;
    align-items: center;
}
/* サイトタイトルかぶり調整 */
@media screen and (max-width: 800px){
  #title h1 {
    width: 330px;
  }
  #title #title_outer {
    background-size:260px;
  }
}

#mainArticles .article h2:after, .article h3:after, .gallery h3:after, .freeHtml h3:after {
    background: none;
}


.article.bg, .gallery.bg {
    background: var(--primary-100);
}

.article p, .gallery p {
    margin: 2em auto 1em;
}

#mainArticles h2, #listTopics h2, #mainTopics h2 /* 各ページ見出しと最新情報見出し */{
    font-size: 180%;
  	font-family: var(--font-serif);
}
#mainTopics h2 {
	background:none;
    color: var(--text-100);
}
#mainArticles h2, #listTopics h2{
	background: var(--primary-200);
  	color:white;
}
#mainArticles div[id^=blog] h2, .article h3, .gallery h3, .freeHtml h3  /*お花付き見出し*/ {
    text-align: center;
    font-size: 180%;
    color: var(--text-100);
    font-family: var(--font-serif);
}
#mainArticles div[id^=blog] h2::after, .article h3::after, .gallery h3::after, .freeHtml h3::after {
    content: "";
    display: block;
    background: url(/materials/174822909277601.png) bottom center no-repeat;
    height: 2em;
    width: 8em;
    background-size: contain;
    margin: 0 auto;
}

.article h4 /*白underline中見出し*/ { 
    border: none;
    border-bottom: 2px solid white;
    background: none;
    border-radius: 0;
    font-size: 32px;
    font-weight: normal;
    padding-bottom: 8px;
    letter-spacing: 0.16em;
  	font-family: var(--font-serif);
}
.article h4::before /*元デザインのリセット*/{
	display: none;
}
.article.left h4, .article.left p, .article.left ul, .article.right h4, .article.right p, .article.right ul {
	margin: 1em 4vw;
}
.article h5 /* 左線付きミニ見出し */{
    border-left: solid 4px var(--accent-300);
}

ul.maru02 li:before {
    color: var(--accent-300);
}
/* end */

/* list */
.article ol li, .article ul li {
  text-indent: -1.8em;
    padding-left: 1.8em;
}
.article.home ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    height: unset;
    transform: unset;
    width: auto;
    position: static;
    border-radius: unset;
    color: var(--accent-300);
    background: unset;
    font-weight: 900;
    margin-right: 0.8em;
}
/* end */

/* ボタン */
a.btn {
    color: #fff;
    background: var(--primary-200);
    border-radius: 9999px;
    width: 80%;
    margin: 80px auto 0;
    padding: 16px 32px;
    transition: 0.3s ease;
}
a.btn:hover {
    background: white;
  	color: var(--primary-200);
  	border: 3px solid var(--primary-200);
    transition: 0.3s ease;
}
/* end */

/* table */
/* テーブル基本のデザイン */
.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: 1.5em;
    box-sizing: border-box;
}

.article table:not(.contactTable) th {
    background-color: #f7f7f7;
    text-align: center;
}
/* カスタマイズデザイン */
.article table.table_white {
	border: none;
 	border-collapse: collapse;
  	width: 100%;
 	background: var(--bg-100);
  	border-radius: 32px;
  	margin: 10px auto 40px;
}
.article table.table_white th, table.table_white td {
  	padding: 1em;
	border: none;
}
.article table.table_white th {
	background:none;
  	border-right: 2px solid #eee;
  	font-weight: bold;
  	text-align: center;
 	width: 20%;
  	min-width: 4em;
  	vertical-align: top;
  	padding: 1.5em;
}
.article table.table_white td {
  	border: none;
}
.article table.table_pink_back /* tableの背景ピンクに */{
    background: var(--bg-200);
}
.article table.table_pink_back th {
	border-right: 2px solid white;
}

/* end */

/* お問い合わせページ */
#mainArticles .envelope, #mainBlogCommentForm .envelope {
    background: var(--bg-200);
    border-radius: 9999px;
    font-size: 180%;
  	padding: 0;
}
#mainArticles p.envelope a, #mainArticles p.envelope a::before {
    text-decoration: none;
    color: var(--accent-300);
}
#mainArticles p.envelope a::before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    height: unset;
    transform: unset;
    width: auto;
    position: static;
    border-radius: unset;
    color: var(--accent-300);
    background: unset;
    font-weight: 900;
    margin-right: 0.8em;
}
#mainArticles p.envelope a:hover {
opacity: 0.75;
}

#mainArticles form, #mainBlogCommentForm form {
    background: var(--bg-200);
    margin-bottom: 30px;
    width: 100%;
    padding: 3em 3em 0;
    border-radius: 32px;
}
#mainArticles table.contactTable, #mainBlogCommentForm table.contactTable {
  	background: none;
    border: none;
}
#mainArticles table.contactTable tr th, #mainArticles table.contactTable tr td, #mainBlogCommentForm table.contactTable tr th, #mainBlogCommentForm table.contactTable tr td {
    border-bottom: solid 2px var(--bg-100);
    border-right: none;
}
#mainArticles table.contactTable tr:last-child th, #mainArticles table.contactTable tr:last-child td, #mainBlogCommentForm table.contactTable tr:last-child th, #mainBlogCommentForm table.contactTable tr:last-child td {
	border-bottom:none;
}
#mainArticles table.contactTable tr th, #mainArticles table.contactTable tr td, #mainBlogCommentForm table.contactTable tr th, #mainBlogCommentForm table.contactTable tr td {
    vertical-align: top; /* 左の欄の文字を上に並べる*/
}
#mainArticles table.contactTable tr td, #mainBlogCommentForm table.contactTable tr td, #mainArticles table.contactTable tr th, #mainBlogCommentForm table.contactTable tr th {
    background: none;
}
#mainArticles table.contactTable input.button, #mainArticles table.contactTable input[type=button], #mainBlogCommentForm table.contactTable input.button, #mainBlogCommentForm table.contactTable input[type=button]{
	width: 50%;
	background: var(--primary-200);
    letter-spacing: 0.15em;
}
#mainArticles table.contactTable input.button:hover, #mainArticles table.contactTable input[type=button]:hover, #mainBlogCommentForm table.contactTable input.button:hover, #mainBlogCommentForm table.contactTable input[type=button]:hover {
    background: white;
  	color: var(--primary-200);
  	border: 3px solid var(--primary-200);
    transition: 0.3s ease;
}
.recaptcha_policy {
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 11px !important;
    color: #444 !important;
}
.recaptcha_policy a {
    font-size: 11px !important;
    color: #111 !important;
}
.validator-form .validator-valid {
    background: none;
}
/* end */

/* header */
#topMenu_outer .topMenu li a {
    color: var(--text-100);
  	font-family: var(--font-serif);
}
#topMenu_outer .topMenu li a:hover {
  	color: var(--text-100);
	opacity: 0.75;
  	background: none;
}
#topMenu_outer .topMenu li a:after {
	background:white;
  	width: 2px;
}
/* end */

/* footer */
#footer {
    background: var(--primary-200);
    color: white;
  	font-family: var(--font-serif);
  	font-weight: 200;
}
#footer * {
    color: white;
}
#footer_body {
	padding:16px 0 60px;
}
#footer_body .topMenu, #footer_body .services {
	flex-direction: row;
  	justify-content: space-between;
    width: 100%;
}
#footer_body .copyright {
    background: var(--primary-200);
  	font-size: 80%;
}
#footer_body .topMenu li a, #footer_body .services li a {
    color: white;
    background: none;
}
#footer_body .topMenu li a:before, #footer_body .services li a:before {
    content: none;
}

#footer_body .topMenu li a:hover, #footer_body .services li a:hover {
    background: none;
  	color: var(--primary-100);
}

@media screen and (max-width: 780px) {
	#footer_body .topMenu li a, #footer_body .services li a {
      text-align: center;
  }
    #footer_body .topMenu, #footer_body .services {
	  flex-direction: column;
  }
}
/* end */

/* col2 contents */
.article.bg_white .article_outer {
    background: var(--bg-100);
    padding: 0 4vw 2em;
    border-radius: 32px;
}
.article.right .image img {
    border-radius: 0 0 0 48px;
}
.article.left .image img {
    border-radius: 0 48px 0 0;
}
.article.full .article_body, .gallery.full .article_body {
    width: 100%;
    margin: auto;
}
.article .article_left .image, .article .article_right .image {
    max-width: 46%;
}
@media screen and (max-width: 1024px) {
      .article.full, .article.max {
        margin: 0 0 40px;
        width: 100%;
        flex-basis: 100%;
        padding-left: 0;
        padding-right: 0;
    }

}

/* end */

/* 最新情報 */
#mainTopics {
    background: transparent;
}
ul.topics li {
    background: var(--bg-100);
  	border-radius: 32px;
}
ul.topics li p.date {
    font-size: 0.666em;
    line-height: 1;
    margin: 0 0 3px;
    display: inline-block;
    padding: 0;
    border-radius: 4px;
    color: var(--text-100);
    background: none;
}
ul.topics li h3 a {
    color: var(--link);
}
ul.topics li h3 a:hover {
	color: var(--link-hover);
}
ul.topics li p.more a, #mainTopics .listview a {
    background: var(--primary-200);
    color: #fff;
    transition: 0.3s ease;
  	border-radius: 999px;
}
ul.topics li p.more a:hover, #mainTopics .listview a:hover {
  	background: var(--primary-200);
    opacity: 0.75;
  	transition: 0.3s ease;
}
ul.topics li p.description {
    border-bottom: 2px solid #eee;
}

/* end */

/* お問い合わせバナー */
.contact_banner {
    text-align: center;
    margin: 0 auto 40px;
    width: 100%;
}
.contact_banner a.contact {
	transition: 0.3s ease;
}
.contact_banner a.contact img {
    width: 90%;
}
/* end */

/* 会社概要 */
.side_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 80%;
  	margin: 40px auto 24px;
}
.sideLogo {
    margin: 0;
    width: 30%;
    text-align: center;
}
.sideLogo img {
    width: 64%;
    align-items: center;
}

table.normalTbl {
    width: 70%;
}
.normalTbl tr {
    border-bottom: 2px solid white;
}
table.normalTbl th {
    width: 20%;
  	font-weight: bold;
  	padding-top: 1em;
}
table.normalTbl td {
    width: 90%;
}
/* end */

/*　レスポンシブ600px以下　*/
  /* スマホ下部電話バナー */
@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: white;
      background: var(--primary-300);
      text-decoration: none;
      font-size: 16px;
      line-height: 45px;
      height: 100%;
  }
    #bottomLink a span::before {
      content: "\f095";
      font-family: "Font Awesome 5 Free";
      margin-right: 8px;
      display: inline-block;
      transform: rotate(-270deg);
      font-weight: bold;
  }
}
/* スマホ下部バナーend */


@media screen and (max-width: 600px){
  #toggle {
      background-color: var(--primary-200);
  }
  .active #toggle {
      background-color: var(--primary-200);
  }
  	#title h1 {
      width: 240px;
  }
  	#title #title_outer {
      background: none;
      height: 56px;
  }
  	a.btn {
      margin: 0 auto;
  }
  	.article h4 {
  	  font-size: 23px;
  }
	.article .article_left .image, .article .article_right .image {
      max-width: 100% !important;
      border-radius: 0px;
  }
    .contact_banner a.contact img {
      width: 100%;
  }
    .side_bottom {
      flex-direction: column;
      font-size: 100%;
  }
    .sideLogo img {
      width: 100%;
  }
    table.normalTbl th, table.normalTbl td, .article table.table_white th, .article table.table_white td{
      width: 100%;
      display: block;
      text-align: center;
  }
    table.normalTbl, .article table.table_white {
      width: 100%;
  }
  .article table.table_white th{
      border-right: none;
  	  border-bottom: 2px solid #eee;
  }
  .article table.table_pink_back th {
      border-bottom: 2px solid white;
  }
    #mainContents {
      padding-bottom: 0;
  }
	#mainArticles form, #mainBlogCommentForm form {
      padding: 0;
  }
}