@charset "UTF-8";

/*============================================================
reset
============================================================*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}address{font-style: normal;}article,aside,figure,footer,header,hgroup,nav,section{display:block;}img,object,embed{vertical-align: bottom;}html{overflow-y:scroll;}ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}th{font-weight:bold;}td{font-weight:normal;vertical-align:top;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word;}input[type="radio"]{vertical-align:text-bottom;}input[type="checkbox"]{vertical-align:bottom;*vertical-align:baseline;}select,input,textarea{font:99% sans-serif;}table{font-size:inherit;font:100%;}a:hover,a:active{outline:none;}strong,th{font-weight:bold;}td,td img{vertical-align:top;}sub,sup{font-size:75%;line-height:0;position:relative;}sup{top:-0.5em;}sub{bottom:-0.25em;}pre,code,kbd,samp{font-family:monospace,sans-serif;}label,input[type=button],input[type=submit],button{cursor:pointer;}button,input,select,textarea{margin:0;}button{width:auto;overflow:visible;}.clear:before,.clear:after{content:"\0020";display:block;height:0;overflow:hidden;}.clear:after{clear:both;}.clear{zoom:1;}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;}

/*============================================================
base
============================================================*/

html {
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

body {
  background: #fff;
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 1px;
  color: #6C4300;
  position: relative;
  -webkit-font-feature-settings: 'palt' 1; /*for Android 4.4*/
  font-feature-settings: 'palt' 1;
  -webkit-text-size-adjust: 100%;
}

main {
  display: block;
}

h1, h2, h3, h4, h5, th {
  font-weight: 400;
}

p,li,dd,td {
  text-align: justify;
	text-justify: inter-ideograph;
}

li {
  list-style: none;
}

a {
  color: #6C4300;
  text-decoration: none;
  outline: none;
  word-break: break-all;
}

.underline {
  text-decoration: underline;
}

.blank {
  position: relative;
}

/*.blank::after {
  background: url(../images/common/icon-blank.png) no-repeat center / contain;
  content: "";
  width: 10px;
  height: 10px;
  margin: auto 0 auto 8px;
  position: absolute;
  top: 0;
  bottom: 0;
}*/

img {
  max-width: 100%;
  height: auto;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

/* スマホのみ横スクロール */
.scroll-list {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.scroll-list::after {
  display: block;
  padding-bottom: 5px;
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  /*content: "← 左右にスクロールできます →";*/
}

/* iOS初期仕様解除 */
input {
  -webkit-appearance: none;
  border-radius: 0;
}

/* テキストハイライト */
*::selection {
  background: #6C4300;
  color: #fff;
}
*::-moz-selection {
  background: #6C4300;
  color: #fff;
}

/*============================================================
汎用クラス
============================================================*/

section {
  overflow: hidden;
}

.inner {
  width: 100%;
  padding: 50px 20px;
  position: relative;
}

.sp {
  display: inline-block;
}

.pc {
  display: none !important;
}

.pcbr {
  display: none;
}

.spbr {
  display: inline;
}

.center,
.spCenter {
  text-align: center;
  margin: 0 auto;
}

.left {
  float: left;
}

.right {
  float: right;
}

.spRight {
  float: right;
}

.spLeft {
  float: left;
}

.indent {
  padding-left:1em;
  text-indent:-1em;
  display: block;
}

.notice.indent {
  font-size: 12px;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.8;
}

.hide,
#header-logo a  {
  width: 0;
  height: 0;
  font-size: 0% !important;
  line-height: 0% !important;
  text-indent: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.smb3   {margin-bottom:3px !important;}
.smb5   {margin-bottom:5px !important;}
.smb10  {margin-bottom:10px !important;}
.smb15  {margin-bottom:15px !important;}
.smb20  {margin-bottom:20px !important;}
.smb25  {margin-bottom:25px !important;}
.smb30  {margin-bottom:30px !important;}
.smb35  {margin-bottom:35px !important;}
.smb40  {margin-bottom:40px !important;}
.smb50  {margin-bottom:50px !important;}
.smb60  {margin-bottom:60px !important;}

.smt3   {margin-top:3px !important;}
.smt5   {margin-top:5px !important;}
.smt10  {margin-top:10px !important;}
.smt15  {margin-top:15px !important;}
.smt20  {margin-top:20px !important;}
.smt25  {margin-top:25px !important;}
.smt30  {margin-top:30px !important;}
.smt35  {margin-top:35px !important;}
.smt40  {margin-top:40px !important;}
.smt50  {margin-top:50px !important;}
.smt60  {margin-top:60px !important;}

.smr3   {margin-right:3px !important;}
.smr5   {margin-right:5px !important;}
.smr10  {margin-right:10px !important;}
.smr15  {margin-right:15px !important;}
.smr20  {margin-right:20px !important;}
.smr25  {margin-right:25px !important;}
.smr30  {margin-right:30px !important;}
.smr35  {margin-right:35px !important;}
.smr40  {margin-right:40px !important;}

.sml3   {margin-left:3px !important;}
.sml5   {margin-left:5px !important;}
.sml10  {margin-left:10px !important;}
.sml15  {margin-left:15px !important;}
.sml20  {margin-left:20px !important;}
.sml25  {margin-left:25px !important;}
.sml30  {margin-left:30px !important;}
.sml35  {margin-left:35px !important;}
.sml40  {margin-left:40px !important;}

.fz16 {
  font-size: 16px;
}

.fw300 {
  font-weight: 300;
}

.fw500 {
  font-weight: 500;
}

.column-sp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.column-sp.center {
  justify-content: center;
}

.sec-title {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 2px;
  text-align: center;
  padding-top: 50px;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.sec-title::before {
  content: "";
  background: url(../img/icon-title.png) no-repeat center / contain;
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
}

.line-title {
  min-width: 100px;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 2px;
  padding-bottom: 15px;
  margin-bottom: 40px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  display: inline-block;
}

.line-title::after {
  content: "";
  width: 70px;
  border-bottom: solid 4px #F4B2B2;
  margin: auto;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
}

/* slick */
.slick-dots li {
  display: inline-block;
  margin: 0 10px;
}

.slick-dots li button {
  width: 10px !important;
  height: 10px !important;
  box-shadow: none !important;
  background-color: #6C4300 !important;
  opacity: .15;
}

.slick-dots li.slick-active button {
  background: #6C4300 !important;
  opacity: 1;
}

/*============================================================
header
============================================================*/

header {
  background: rgba(255,255,255,1);
  width: 100%;
  height: 80px;
  padding: 0 15px;
  position: fixed;
  top: 0;
  z-index: 3;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

#header-logo {
  background: url(../img/header-logo.svg) no-repeat center / contain;
  width: 200px;
  height: 57px;
  margin-top: 10px;
  z-index: 99;
  transition: all 0.5s ease-out;
}

#header-logo a {
  width: 200px;
  height: 57px;
  display: block;
}

#header-logo.active {
  display: block;
}

#btn-menu {
  width: 60px;
  height: 80px;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}

#btn-menu a {
  display: block;
  width: 30px;
  height: 25px;
  text-decoration: none;
  border-bottom: none;
  line-height: 65px;
  font-weight: normal;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
}

#btn-menu p {
  font-size: 11px;
  line-height: 1;
  position: absolute;
  width: 40px;
  left: -2px;
  bottom: -20px;
}

.menu-trigger,
.menu-trigger i {
  display: inline-block;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.menu-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 25px;
  letter-spacing: 1px;
}

.menu-trigger i {
  background: #6C4300;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
}

.menu-trigger i:nth-of-type(1) { top: 0px; }
.menu-trigger i:nth-of-type(2) { top: 11px; }
.menu-trigger i:nth-of-type(3) { bottom: 0px; }

.menu-trigger.active i:nth-of-type(1) {
  -webkit-transform: translateY(11px) rotate(-45deg);
  transform: translateY(11px) rotate(-45deg);
  /*background-color: #fff !important;*/
}
.menu-trigger.active i:nth-of-type(2) { opacity: 0; }
.menu-trigger.active i:nth-of-type(3) {
  -webkit-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg);
  /*background-color: #fff !important;*/
}

#globalnav {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
}

#globalnav.hidden {
  display: none;
}

#globalnav.active {
  -webkit-animation: show .5s linear 0s;
  animation: show .5s linear 0s;
}

@-webkit-keyframes show {
  from { opacity: 0; display: none; }
  to { opacity: 1; display: block; }
}
@keyframes show {
  from { opacity: 0; display: none; }
  to { opacity: 1; display: block; }
}

#globalnav.inactive {
  -webkit-animation: hide .5s linear 0s;
  animation: hide .5s linear 0s;
}

@-webkit-keyframes hide {
  from { opacity: 1; display: block; }
  to { opacity: 0; display: none; }
}
@keyframes hide {
  from { opacity: 1; display: block; }
  to { opacity: 0; display: none; }
}

#navWrap {
  width: 320px;
  margin: 0 auto;
}

#globalnav ul {
  width: 100%;
  padding: 0 20px;
}

#globalnav li a {
  font-size: 16px;
  color: #6C4300;
  display: block;
}

#navBg {
  background: rgba(255,255,255,1);
  width: 100%;
  height: 100%;
  padding-top: 20px;
}

#navInner {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 50px;
}

#navWrap ul li {
  position: relative;
  line-height: 1.6;
}

#navWrap ul li + li {
  margin-top: 20px;
}

#navWrap ul li a {
  width: 100%;
}

.header-tel {
  text-align: center;
  line-height: 1.6;
  margin: 30px auto;
  justify-content: center;
}

.header-tel p {
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}

.header-tel a {
  width: 150px;
  height: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px;
}

.header-tel a + a {
  margin-left: 20px;
}

.header-tel a img {
  width: 32px;
  margin-right: 10px;
}

.head-banner {
  width: 320px;
  margin: 0 auto;
}

.head-banner ul {
  padding: 0 !important;
}

.head-banner ul li + li {
  margin-top: 20px;
}

.head-banner ul li a .title {
  margin: 0 !important;
}

.head-banner ul li a p:not(.title) {
  font-size: 14px;
}


/*============================================================
footer
============================================================*/

footer {
  background: #6C4200;
  color: #fff;
  position: relative;
}

footer .inner {
  padding: 8px 0;
}

footer a {
  color: #fff;
}

.copyright {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
}

/*============================================================
#top
============================================================*/

.mv {
  background: #C1E4E9;
  height: 350px;
  position: relative;
}

.mv .inner {
  height: 350px;
  padding: 40px 20px;
}

.mv::after {
  content: "";
  background: url(../img/mv-bottom.png) no-repeat center / 630px 165px;
  width: 100%;
  height: 165px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -90px;
  margin: auto;
}

.mv .illust {
  width: 250px;
  height: 280px;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
}

#top .lead .inner {
  padding: 0 20px 30px;
}

#top .lead .title {
  font-size: 16px;
  font-weight: 500;
  line-height: 2.2;
  margin-bottom: 20px;
}

#top .lead .title span {
  font-size: 22px;
}

#top .lead p + p {
  margin-top: 10px;
}

.service-wrap {

  margin: 0 auto;
}

.service-wrap + .service-wrap {
  margin-top: 60px;
}

.service-wrap .icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
}

.service-wrap .icon + .title {
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}

.service-wrap .column .illust {
  width: 200px;
  margin: 0 auto 40px;
}

.service-wrap .column .txt {
  
}

.service-wrap .column .txt .title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.service-wrap .btn {
  text-align: center;
  margin-top: 20px;
}

.service-wrap .btn a {
  font-size: 16px;
  padding: 7px 25px 3px 0;
  border-bottom: solid 2px #F3B1B1;
  position: relative;
}

.service-wrap .btn a::after {
  content: '';
  display: block;
  border-top: solid 1.5px #6B4300;
  border-right: solid 1.5px #6B4300;
  height: 8px;
  width: 8px;
  transform: translateY(-50%) rotate(45deg);
  position: absolute;
  bottom: 4px;
  right: 7px;
}