@charset "utf-8";

html { background: #fbf5e3; }

body         { color: #333; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 400; }
body a       { color: #333; transition: .3s all; }
body a:hover { color: #78af03; }

header              { display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; z-index: 11; width: 100%; min-width: 1210px; height: 260px; padding: 20px 30px; pointer-events: none; }
header .logo        { position: relative; z-index: 11; pointer-events: auto; }
header #menu-cb,
header #menu-icon   { display: none; }
header #ham-menu    { width: calc(100% - 464px); max-width: 1170px; height: 90px; margin: 37px 0 0 36px; padding: 30px 0; background: #fbf5e3; border: 2px solid #333; border-radius: 45px; font-size: 1.8rem; font-weight: 700; pointer-events: auto; }
header #ham-menu ul { text-align: center; letter-spacing: -.4em; }
header #ham-menu li { display: inline-block; padding: 0 20px; letter-spacing: normal; }
header #ham-menu a  { transition: .3s all; }

header > .contact          { margin-top: 15px; font-weight: 700; pointer-events: auto; }
header > .contact i        { display: block; position: relative; margin-bottom: 10px; font-style: normal; text-align: center; }
header > .contact i:before,
header > .contact i:after  { content: ''; position: absolute; top: 50%; width: 2px; height: 20px; background: #333; }
header > .contact i:before { left: 0; transform: rotate(-30deg) translateY(-50%); }
header > .contact i:after  { right: 0; transform: rotate(30deg) translateY(-50%); }
header > .contact a        { display: block; width: 200px; height: 70px; border: 2px solid #333; border-radius: 10px; background: #8ec31f; color: #000; font-size: 2rem; text-align: center; line-height: 70px; transition: .3s all; }
header > .contact a:hover  { background: #fff; color: #8ec31f; }

@media (min-width: 768px) and (max-width: 1380px) {
  header #ham-menu    { font-size: 1.6rem; }
  header #ham-menu li { padding: 0 10px; }
}

.conv              { margin-top: 40px; padding: 110px 0 80px; background: #fbf5e3 url(../images/bg_conv.png) no-repeat center 0; text-align: center; }
.conv .title       { font-size: 4rem; font-weight: 700; }
.conv .title i     { display: inline-block; position: relative; margin-right: 60px; padding: 0 9px; font-style: normal; font-size: 2rem; }
.conv .title i:last-of-type   { margin-right: 0; }
.conv .title i:before,
.conv .title i:after  { content: ''; position: absolute; top: 50%; width: 2px; height: 20px; background: #333; }
.conv .title i:before { left: 0; transform: rotate(-30deg) translateY(-50%); }
.conv .title i:after  { right: 0; transform: rotate(30deg) translateY(-50%); }
.conv .title p        { margin-top: 10px; }
.conv .col2           { display: flex; justify-content: space-between; margin-top: 50px; }
.conv .col2 li        { width: calc((100% - 30px) / 2); }
.conv .col2 li a      { display: block; padding: 40px; border: 2px solid #333; border-radius: 20px; background: rgba(255,255,255,1); }
.conv .col2 li a[href^="tel:"] { pointer-events: none; }
.conv .col2 li a:hover{ color: #333; background: rgba(255,255,255,.5); }
.conv .col2 i                  { display: block; font-size: 3rem; }
.conv .col2 i.fa-phone,
.conv .col2 i.fa-envelope      { margin-bottom: 20px; }
.conv .col2 i.fa-arrow-right   { margin-top: 15px; }
.conv .sub-title   { margin-bottom: 10px; font-size: 3rem; font-weight: 700; }
.conv .border-font { position: relative; color: #8ec31f; font-size: 4rem; font-weight: 700; -webkit-text-stroke: 2px #333; text-stroke: 2px #333; }
.conv .col2 li a[href^="tel:"] .border-font { font-size: 7rem; }

@media (max-width: 767px) {
  .conv .title i { font-size: 1.6rem; }
}

footer        { padding-top: 190px; background: url(../images/bg_footer.png) no-repeat center 0; }
footer nav    { padding: 40px 0; border-top: 2px solid #333; border-bottom: 2px solid #333; }
footer nav ul { display: flex; justify-content: center; }
footer nav li:not(:last-child) { margin-right: 50px; }

footer .site-info                    { padding: 80px 0 40px; }
footer .site-info .info-inner        { display: flex; flex-wrap: wrap; justify-content: space-between; line-height: 2; }
footer .site-info .outline           { width: 280px; }
footer .site-info .outline .logo     { margin-bottom: 30px; }
footer .site-info .const-area        { position: relative; width: calc(100% - 300px); padding: 60px 60px 40px; border: 2px solid #333; border-radius: 20px; }
footer .site-info .const-area .title { position: absolute; top: -30px; width: 200px; height: 60px; border: 2px solid #333; border-radius: 30px; background: #fbf5e3; font-size: 2rem; font-weight: 700; text-align: center; line-height: 55px; }
footer .site-info .const-area dl     { display: flex; flex-wrap: wrap; }
footer .site-info .const-area dt     { width: 4em; margin: 10px 20px 0 0; font-weight: 700; }
footer .site-info .const-area dd     { width: calc(100% - 4em - 20px); margin-top: 10px; }
footer .site-info .const-area dt:first-of-type,
footer .site-info .const-area dd:first-of-type { margin-top: 0; }
footer .site-info .const-area .ask   { margin-top: 30px; font-weight: bold; font-size: 2rem;}

footer .site-info .bnr-list     { display: flex; flex-wrap: wrap; margin-top: 50px; }
footer .site-info .bnr-list li  { width: calc((100% - 30px) / 2); margin: 30px 30px 0 0; }
footer .site-info .bnr-list li:nth-child(-n+2) { margin-top: 0; }
footer .site-info .bnr-list li:nth-child(2n)   { margin-right: 0; }
footer .site-info .bnr-list img { width: 100%; height: auto; }

footer small { display: block; padding: 30px 0; text-align: center; }

footer #pagetop       { position: fixed; right: 30px; bottom: 130px; width: 70px; height: 70px; border: 2px solid #333; border-radius: 10px; background: #fbf5e3; font-size: 3rem; text-align: center; line-height: 60px; cursor: pointer; transition: .3s all; }
footer #pagetop:hover { line-height: 50px; }

main        { margin-top: 210px; padding-top: 60px; /*background: url(../images/bg.png) repeat-y center 0;*/ line-height: 2; }
main h1     { margin-bottom: 60px; font-size: 4rem; font-weight: 700; text-align: center; }

.ttl-green       { position: relative; margin-bottom: 70px; padding-bottom: 30px; color: #8ec31f; font-size: 3.6rem; font-weight: 700; text-align: center; }
.ttl-green:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 60px; height: 6px; border-radius: 3px; background: #8ec31f; transform: translateX(-50%); }

.inner        { width: 1170px; margin: 0 auto; }
.inner-s      { width: 865px; margin: 0 auto; }
.inner-m      { width: 970px; margin: 0 auto; }
.scroll-inner { overflow-y: hidden; }

/*スマホ時メニューを開いたときに背景コンテンツ固定*/
.scroll-prevent { position: fixed; z-index: -1; width: 100%; height: 100%; }

/*
.topic-path            { display: flex; flex-wrap: wrap; padding: 30px 20px; }
.topic-path li:not(:last-child) { margin-right: 40px; }
.topic-path li a       { position: relative; color: #02449f; transition: .3s all; }
.topic-path li a:after { content: ''; position: absolute; top: 50%; right: -28px; width: 18px; height: 1px; background: #8f8f8f; transform: translateY(-50%); }
.topic-path li a:hover { opacity: .7; }
*/

ul.basic li:before { content: '●'; margin-right: 5px; }

.anc-list               { display: flex; flex-wrap: wrap; justify-content: center; font-size: 2rem; font-weight: 700; }
.anc-list li            { position: relative; width: 270px; height: 90px; margin-right: 30px; }
.anc-list li:last-child { margin-right: 0; }
.anc-list li:before,
.anc-list li:after      { content: ''; position: absolute; top: 0; z-index: 2; width: 34px; height: 100%; border: 2px solid #333; pointer-events: none; }
.anc-list li:before     { left: 0; border-right: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.anc-list li:after      { right: 0; border-left: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.anc-list li a          { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; border-radius: 20px; background: #fff; }
.anc-list li a:after    { content: '\f063'; position: absolute; top: 50%; right: 40px; font-family: 'Font Awesome 6 Pro'; font-weight: 400; transform: translateY(-50%); }

@media (max-width: 767px) {
  header           { min-width: initial; height: 70px; padding: 10px 20px; }
  header .logo img { width: 54px; height: auto; }
  
  header #ham-menu                { position: fixed; top: 0; right: -100vw; z-index: 10; width: 100vw; max-width: initial; height: 100%; background: #fbf5e3; margin-top: 0 !important; padding: 80px 20px 0; border: 0; border-radius: 0; font-size: 1.8rem; transition: transform .2s ease-out 0s; }
  header #ham-menu ul             { display: block; letter-spacing: normal; }
  header #ham-menu li             { display: block; margin-top: 40px; padding: 0; }
  header #ham-menu a           { display: block; }
  
  header #menu-icon                     { display: block; position: fixed; top: 10px; right: 10px; z-index: 11; width: 50px; height: 50px; border: 2px solid #333; border-radius: 10px; background: #fbf5e3; pointer-events: auto; }
  header #menu-icon span								{ display: inline-block; position: absolute; left: 15px; width: 17px; height: 3px; background-color: #333; transition: all .4s; }
  header #menu-icon span:nth-of-type(1)	{ top: 14px; }
  header #menu-icon span:nth-of-type(2)	{ top: 21px; }
  header #menu-icon span:nth-of-type(3)	{ top: 28px; }
  header #menu-cb:checked ~ #ham-menu   { transform: translate(-100vw); }
  header #menu-cb:checked ~ #menu-icon  { background: none; }
  header #menu-cb:checked ~ #menu-icon span                { background: #333; }
  header #menu-cb:checked ~ #menu-icon span:nth-of-type(1) { transform: translateY(7px) rotate(-315deg); }
  header #menu-cb:checked ~ #menu-icon span:nth-of-type(2) { opacity: 0; }
  header #menu-cb:checked ~ #menu-icon span:nth-of-type(3) { transform: translateY(-7px) rotate(315deg); }
  
  header > .contact   { position: fixed; top: 10px; right: 70px; z-index: 11; margin-top: 0; }
  header > .contact i { display: none; }
  header > .contact a { width: 130px; height: 50px; font-size: 1.6rem; line-height: 44px; }
  
	.conv              { padding: 130px 0 50px; background: url(../images/bg_conv_sp.png) no-repeat center 0; }
	.conv .title       { font-size: 2.7rem; }
	.conv .title i     { margin-right: 0; }
	.conv .title p        { margin-top: 15px; }
  .conv .col2           { display: block; margin-top: 20px; }
  .conv .col2 li        { width: auto; margin-bottom: 30px; }
  .conv .col2 li:last-child { margin-bottom: 0; }
  .conv .col2 li a      { padding: 30px 10px; }
	.conv .col2 li a[href^="tel:"] { pointer-events: auto; }
  .conv .col2 i.fa-phone,
  .conv .col2 i.fa-envelope      { margin-bottom: 15px; }
  .conv .col2 i.fa-arrow-right   { margin-top: 15px; }
  .conv .sub-title   { margin-bottom: 10px; font-size: 2rem; }
  .conv .border-font { font-size: 3rem; -webkit-text-stroke: 1.5px #333; text-stroke: 1.5px #333; }
  .conv .col2 li a[href^="tel:"] .border-font { font-size: 4.6rem; }
  
  footer        { padding-top: 70px; /*background: url(../images/bg_footer.png) no-repeat center 0;*/ background-size: auto 70px; }
  footer nav    { font-size: 2rem; font-weight: 500; text-align: center; }
  footer nav ul { display: block; }
  footer nav li:not(:last-child) { margin: 0 0 30px; }

  footer nav { padding: 20px 0; font-size: 1.6rem; }
  footer nav li:not(:last-child) { margin: 0 0 20px; }
  
  footer .site-info                    { padding: 50px 0; }
  footer .site-info .info-inner        { display: block; }
  footer .site-info .outline           { width: auto; text-align: center; }
  footer .site-info .const-area        { width: auto; margin-top: 80px; padding: 30px 30px 20px; }
  footer .site-info .const-area .title { left: 50%; transform: translateX(-50%); }
  footer .site-info .const-area dl     { display: block; }
  footer .site-info .const-area dt     { width: auto; margin: 10px 0 0; }
  footer .site-info .const-area dd     { width: auto; margin-top: 0; }
  footer .site-info .bnr-list          { display: block; margin-top: 40px; }
  footer .site-info .bnr-list li       { width: auto; margin: 30px 0 0; }
  footer .site-info .bnr-list li:nth-child(-n+2) { margin-top: 30px; }
  footer .site-info .bnr-list li:first-child     { margin-top: 0; }
  footer .site-info .const-area .ask   { font-size: 1.6rem; text-align: center; margin: 30px 8px 10px 8px; line-height: 1.5;}
  
  footer small { font-size: 1.2rem; }
  
  footer #pagetop       { right: 10px; bottom: 30px; width: 50px; height: 50px; font-size: 2rem; line-height: 45px; }
  footer #pagetop:hover { line-height: 40px; }
  
  main        { margin-top: 100px; padding-top: 0; /*background: url(../images/bg.png) repeat-y center 0;*/ }
  main h1     { margin-bottom: 30px; font-size: 3rem; }
  
  .ttl-green       { margin-bottom: 35px; padding-bottom: 15px; font-size: 2.6rem; }
  .ttl-green:after { width: 40px; height: 3px; }
  
  .inner,
  .inner-s,
  .inner-m      { width: 100%; padding: 0 20px; }
  .scroll			  { width: 100%; overflow-x: auto; }
	.scroll-inner	{ width: 1170px; }
  
  .anc-list    { display: block; font-size: 1.8rem; text-align: center; }
  .anc-list li { display: inline-block; height: 70px; margin: 0 0 20px; }
  .anc-list li:last-child { margin-bottom: 0; }
}