@charset "UTF-8";

@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css?family=Quicksand:300,400,500,700');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');


/*========================
ヘッダーグローバルメニュー
========================*/
.headmenu {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  margin-top: -64px;
  z-index: 100;
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-end;
}
.headmenu_logo{
  max-width: 260px;
  padding: 0 30px 0 15px;
}
.headmenu li:nth-child(n+2):nth-child(-n+7) {
  text-align: center;
  padding: 0 32px;
}
.headmenu li:nth-child(8) {
  display: none;
}
.headmenu li a {
  display: block;
  text-decoration: none;
}
.hmicon {
  width: 100%;
  max-width: 48px;
  margin-bottom: 10px;
}
.hmjpn {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1em;
  color: #222;
  line-height: 100%;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.hmeng {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.8em;
  color: #138BCA;
  line-height: 100%;
  text-decoration: none;
}
@media screen and (max-width: 1120px) {
.headmenu {
  margin-top: -54px;
  }
.headmenu_logo{
  max-width: 220px;
  padding: 0 25px 0 15px;
  }
.headmenu li:nth-child(n+2):nth-child(-n+7) {
  padding: 0 24px;
  }
.hmicon {
  width: 100%;
  max-width: 32px;
  }
.hmjpn {
  font-size: 0.95em;
  }
.hmeng {
  font-size: 0.75em;
  }
}
@media screen and (max-width: 960px) {
.headmenu {
  margin-top: -64px;
  }
.headmenu li:nth-child(n+2):nth-child(-n+7) {
  padding: 0 20px;
  }
.hmjpn {
  font-size: 0.8em;
  }
.hmeng {
  font-size: 0.65em;
  }
}
@media screen and (max-width: 840px) {
.headmenu {
  margin-top: -48px;
  }
.headmenu_logo{
  max-width: 200px;
  padding: 0 20px 0 15px;
  }
.headmenu li:nth-child(n+2):nth-child(-n+7) {
  padding: 0 15px;
  }
.hmjpn {
  margin-bottom: 6px;
  }
}
@media screen and (max-width: 767px) {
.headmenu_logo{
  max-width: 180px;
  padding: 0 10px 0 15px;
  }
.headmenu li:nth-child(n+2):nth-child(-n+7) {
  display: none;
  }
.headmenu li:nth-child(8) {
  display: block;
  padding: 0 15px 0 0;
  margin: 0 0 0 auto;
  text-align: right;
  }
}
.hmadd {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  line-height: 1.6;
  font-size: 0.9em;
}
.hmaddbr {
  display: none;
}
@media screen and (max-width: 540px) {
.headmenu {
  margin-top: -32px;
  }
.headmenu_logo{
  max-width: 160px;
  }
.hmadd {
  font-size: 0.85em;
  }
.hmaddbr {
  display: block;
  }
}

/*アイコン付き電話リンク*/
.hmtel {
  font-size:1.4em;
  line-height:100%;
  padding:0;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.03em;
  margin: 0 0 5px;
}
.hmtel :before {
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/common/icon_tel.png) no-repeat;
  background-size:contain;
  vertical-align:middle;
  margin-bottom: 2px;
}
.hmtel a{
  text-decoration:none;
  color:#138BCA;
  font-weight:700;
}


/*========================
ヘッダー
========================*/
header {
  width: 100%;
  height: 320px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
header .imgmask {
  height: 100%;
  background: rgba(223,203,170,0.4);
}
.headtitle {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -52%);
  -webkit-transform: translate(-50%, -52%);
  -ms-transform: translate(-50%, -52%);
  text-align: center;
}
.headtitle h2{
  font-family: "Montserrat", sans-serif;
  font-size: 3.2em;
  font-weight: 300;
  line-height: 100%;
  white-space: nowrap;
  color: #FFF;
  letter-spacing: 0.03em;
  text-shadow: 0px 0px 7px rgba(0,0,0,0.4);
  margin-bottom: 18px;
}
.headtitle h1{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 100%;
  white-space: nowrap;
  color: #FFF;
  letter-spacing: 0.04em;
  text-shadow: 0px 0px 7px rgba(0,0,0,0.4);
}
@media screen and (max-width: 960px) {
header {
  height: 240px;
  }
.headtitle h2{
  font-size: 2.8em;
  margin-bottom: 15px;
  }
.headtitle h1{
  font-size: 1.3em;
  }
}
@media screen and (max-width: 640px) {
header {
  height: 200px;
  }
.headtitle h2{
  font-size: 2.4em;
  margin-bottom: 10px;
  }
.headtitle h1{
  font-size: 1.2em;
  }
}
@media screen and (max-width: 480px) {
header {
  height: 160px;
  }
.headtitle h2{
  font-size: 2.1em;
  margin-bottom: 6px;
  }
.headtitle h1{
  font-size: 1.15em;
  font-weight: 500;
  }
}

/*お知らせ*/
.header_topics {
  background-image:url(../img/topics/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*導入設備*/
.header_facility {
  background-image:url(../img/facility/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*医院情報*/
.header_aboutus {
  background-image:url(../img/aboutus/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*医師紹介*/
.header_doctor {
  background-image:url(../img/doctor/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*お問い合わせ*/
.header_contact {
  background-image:url(../img/contact/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*診療内容*/
.header_service {
  background-image:url(../img/service/header.png);
  background-position:center bottom;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*インプラント*/
.header_implant {
  background-image:url(../img/service/implant/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*入れ歯*/
.header_denture {
  background-image:url(../img/service/denture/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*成人矯正*/
.header_invisalign {
  background-image:url(../img/service/invisalign/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*小児矯正*/
.header_child {
  background-image:url(../img/service/child/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*精密むし歯治療*/
.header_directbonding {
  background-image:url(../img/service/directbonding/header.png);
  background-position:right center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*ホワイトニング*/
.header_whitening {
  background-image:url(../img/service/whitening/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*神経治療*/
.header_rootcanal {
  background-image:url(../img/service/rootcanal/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*歯周病*/
.header_gum {
  background-image:url(../img/service/gum/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*親知らず*/
.header_wisdom {
  background-image:url(../img/service/wisdom/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/*むし歯予防*/
.header_maintenance {
  background-image:url(../img/service/maintenance/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}

/*========================
フッター
========================*/
footer {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
@media screen and (max-width: 767px) {
footer {
  margin-bottom: 54px;
  }
}

/*マップ ＆ 医院概要*/
.foot {
  width:100%;
  height: auto;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
  align-items:stretch;
}
.footmap {
  width: 70%;
  height: auto;
}
.footmap iframe {
  width: 100%;
  height:100%;
  padding: 0;
  margin: 0;
  display: block;
}
.footinfo {
  width: 30%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  background: #D8EFFC;
}
.footinfowrap {
  width: 100%;
  max-width: 380px;
  height: 100%;
  padding: 50px 30px 40px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}
.footlogo {
  width:100%;
  max-width:200px;
}
@media screen and (max-width: 1120px) {
.footmap {
  width: 60%;
  }
.footinfo {
  width: 40%;
  }
.footlogo {
  max-width:180px;
  }
}
@media screen and (max-width: 767px) {
.footmap,
.footinfo {
  flex-direction: column;
  display:block;
  width: 100%;
  max-width:100%;
  }
.footmap iframe {
  height:300px;
  }
.footinfowrap {
  padding: 30px 20px;
  }
.footlogo {
  max-width:160px;
  }
}
@media screen and (max-width: 480px) {
.footmap iframe {
  height:240px;
  }
}

/*診療情報 ＆ サイトマップ*/
.footwrap {
  width: 100%;
  padding: 50px 30px 15px;
  margin: 0 auto;
  background: #138BCA;
  color: #FFF;
}
.foot2 {
  width:100%;
  max-width: 1240px;
  margin: 0 auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
}
.foot2 li{
  width:50%;
  margin:0 40px 0 0;
}
.foot2 li:last-child{
  margin:0 0 0 0;
}
.copyright {
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  font-weight: 300;
  font-size: 0.8em;
  color: #9FD8F7;
  letter-spacing: 0.02em;
  margin-top: 30px;
}
@media screen and (max-width: 1000px) {
.foot2 li{
  margin:0 30px 0 0;
  }
}
@media screen and (max-width: 840px) {
.foot2 {
  flex-direction: column;
  display:block;
  }
.foot2 li {
  width:100%;
  margin:0 0 30px 0;
  }
.foot2 li:last-child{
  margin:0 0 0 0;
  }
}
@media screen and (max-width: 767px) {
.copyright {
  font-size: 0.75em;
  margin-top: 20px;
  }
}
@media screen and (max-width: 640px) {
.footwrap {
  padding: 40px 20px 15px;
  }
}

/*箇条書き*/
.footnote p {
  background: url(../img/common/marker_footnote.png) no-repeat;
  background-position:0 0.4em;
  background-size: 0.64em;
  padding:0 0 0 1.1em;
  margin-bottom: 3px;
  line-height: 1.7;
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

/*サイトマップ*/
.foot2 h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #DFCBAA;
  margin-bottom: 10px;
  font-size: 0.95em;
  letter-spacing: 0.03em;
  line-height: 100%;
}
.footlink{
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: 0.9em;
  color: #FFF;
  text-decoration: none;
  white-space: nowrap;
  margin: 0 0.8em 0.3em 0;
  position: relative;
  display: inline-block;
  padding: 0 0 0 1em;
  vertical-align: middle;
}
.footlink:hover{
  text-decoration: underline;
}
.footlink::before,
.footlink::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.footlink::before{
	left: 0;
	width: 0.6em;
	height: 0.6em;
	border-top: 2px solid #DFCBAA;
	border-right: 2px solid #DFCBAA;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/*========================
スマホ用ナビゲーション
========================*/
.footnav {
  display: none;
}
@media screen and (max-width: 767px) {
.footnav {
  display: block;
  width: 100%;
  height: 54px;
  position: fixed;
  bottom: 0;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  background: #DFCBAA;
  z-index: 100000;
  }
.footnav li {
  width: 25%;
  max-width:25%;
  width: calc(100% / 4);
  height: 100%;
  margin: 0 auto;
  padding:10px 0 0;
  box-sizing: border-box;
  border-right: 1px solid #FFF;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.02em;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 100%;
  }
.footnav li a{
  display: block;
  text-decoration: none;
  }
.footnav li:last-child{
  border-right: none;
  }
.footnav li img {
  width: 100%;
  max-width: 18px;
  display: block;
  margin: 0 auto;
  margin-bottom: 6px;
  }
}

/*ハンバーガーメニュー*/
.drawer_hidden {
  display: none;
}
.footnav label p{
  font-weight: 700;
  margin-top: 5px;
  font-size: 1.05em;
}
.drawer_open {
  display: flex;
  height: 54px;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10001;
  cursor: pointer;
}
.drawer_open span{
  position: absolute;
  top: 8px;
}
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 24px;
  background: #138BCA;
  transition: 0.5s;
  position: absolute;
}
.drawer_open span:before {
  bottom: 7px;
}
.drawer_open span:after {
  top: 7px;
}
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* ハンバーガーメニュー中身*/
.footnav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 54px;
  left: 100%; 
  z-index: 10000;
  background: #138BCA;
  transition: .5s;
  padding-top: 54px;
  display: flex;
  align-items: center;
}
#drawer_input:checked ~ .footnav_content {
  left: 0;
}

.footnavbox {
  width: 100%;
  margin: 0 auto;
  padding: 15px;
}
.footnav_logo {
  width: 100%;
  min-width: 100px;
}
.footnavbox h3{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 100%;
  margin: 18px 0 10px;
  color: #DFCBAA;
  font-size: 14px;
  white-space: nowrap;
}
.footnavbox h3:before,
.footnavbox h3:after {
  border-top: 1px solid #DFCBAA;
  content: "";
  width: 100%;
  margin: 0 25px;
}
.footnavbox h3:before {
  margin-right: 0.6em;
}
.footnavbox h3:after {
  margin-left: 0.6em;
}
.footnavbox a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #FFF;
  line-height: 2;
  font-size: 15px;
}
.footnavbox ul {
  width:100%;
  max-width: 480px;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
  }
.footnavbox ul li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 5px 0 5px;
  box-sizing: border-box;
  border: none;
  }
@media screen and (max-width: 420px) {
.footnavbox ul {
  max-width: 300px;
  }
.footnavbox ul li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  }
}


/*========================
汎用パーツ
========================*/
/*-------------------------
アイコン付き電話リンク
--------------------------*/
.tel {
  font-size:1.8em;
  line-height:100%;
  padding:0;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.03em;
  margin: 0;
}
.tel :before {
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/common/icon_tel.png) no-repeat;
  background-size:contain;
  vertical-align:middle;
  margin-bottom: 2px;
}
.tel a{
  text-decoration:none;
  color:#138BCA;
  font-weight:700;
}
@media screen and (max-width: 960px) {
.tel {
  font-size:1.6em;
  }
}

/*-------------------------
アイコン付きボタン
--------------------------*/
/*駐車場*/
a.iconbtn_parking{
  width: auto;
  padding: 8px 12px 6px;
  margin: 2px;
  display: inline-block;
  color: #138BCA;
  background: #FFF;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size:0.85em;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  line-height: 100%;
  border: 1px solid #138BCA;
}
a.iconbtn_parking:before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin: 0 4px 0 0;
  background: url("../img/common/icon_car.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.iconbtn_parking:hover {
  background: #D8EFFC;
}

/*カレンダー*/
a.iconbtn_calendar{
  width: auto;
  padding: 8px 12px 6px;
  margin: 2px;
  display: inline-block;
  color: #138BCA;
  background: #FFF;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size:0.85em;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  line-height: 100%;
  border: 1px solid #138BCA;
}
a.iconbtn_calendar:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 6px 0 0;
  background: url("../img/common/icon_calendar.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.iconbtn_calendar:hover {
  background: #D8EFFC;
}

/*お問い合わせ*/
a.iconbtn_form{
  width: auto;
  padding: 8px 12px 6px;
  margin: 2px;
  display: inline-block;
  color: #138BCA;
  background: #FFF;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size:0.85em;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  line-height: 100%;
  border: 1px solid #138BCA;
}
a.iconbtn_form:before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin: 0 4px 0 0;
  background: url("../img/common/icon_mail.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.iconbtn_form:hover {
  background: #D8EFFC;
}

/*-------------------------
ページ上部へジャンプ
--------------------------*/
#jumptop{
  position:fixed;
  right: 40px;
  bottom:40px;
}
.jumpbtn {
  width:5em;
  height:5em;
  cursor:pointer;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  cursor:pointer;
  background:#138BCA;
  position: relative;
}
.jumpbtn:before {
  content: '';
  position: absolute;
  top: 45%;
  right: 1.7em;
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-top: 2px solid #FFF; 
  border-right: 2px solid #FFF; 
  transform: rotate(-45deg); 
}
@media(max-width:1000px){
#jumptop{
  right: 20px;
  bottom:20px;
  }
.jumpbtn {
  width: 3.5em;
  height: 3.5em;
  }
.jumpbtn:before {
  top: 42%;
  right: 1.2em;
  width: 1em;
  height: 1em;
  }
}
@media(max-width:767px){
#jumptop{
  right: 15px;
  bottom:64px;
  }
.jumpbtn {
  width: 3em;
  height: 3em;
  }
.jumpbtn:before {
  top: 42%;
  right: 1em;
  width: 1em;
  height: 1em;
  }
}

/*-------------------------
ボタン
--------------------------*/
/* 矢印付きグレー角丸ボタン */
.btn_gray {
  display: block;
  position: relative;
  background: #888;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  width: 100%;
  max-width: 340px;
  padding: 10px 12px 12px;
  color: #FFF !important;
  text-align: center;
  text-decoration: none;
  font-size: 1.15em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
}
.btn_gray:hover{
  background: #5D5D5D;
}
.btn_gray:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(45deg);
}
.btn_gray:after {
  content: "";
  position: absolute;
  top: 56%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(-45deg);
}
@media screen and (max-width: 640px) {
.btn_gray {
  font-size: 1.05em;
  font-weight: 500;
  max-width: 280px;
  }
.btn_gray:before {
  width: 10px;
  }
.btn_gray:after {
  width: 10px;
  }
}

/* 矢印付きブルー角丸ボタン */
.btn_blue {
  display: block;
  position: relative;
  background: #138BCA;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  width: 100%;
  max-width: 340px;
  padding: 10px 12px 12px;
  color: #FFF !important;
  text-align: center;
  text-decoration: none;
  font-size: 1.15em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
}
.btn_blue:hover{
  background: #0E699A;
}
.btn_blue:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(45deg);
}
.btn_blue:after {
  content: "";
  position: absolute;
  top: 56%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(-45deg);
}
@media screen and (max-width: 640px) {
.btn_blue {
  font-size: 1.05em;
  font-weight: 500;
  max-width: 280px;
  }
.btn_blue:before {
  width: 10px;
  }
.btn_blue:after {
  width: 10px;
  }
}

/* 矢印付き茶色角丸ボタン */
.btn_brown {
  display: block;
  position: relative;
  background: #96795F;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  width: 100%;
  max-width: 340px;
  padding: 10px 12px 12px;
  color: #FFF !important;
  text-align: center;
  text-decoration: none;
  font-size: 1.15em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
}
.btn_brown:hover{
  background: #6F5946;
}
.btn_brown:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(45deg);
}
.btn_brown:after {
  content: "";
  position: absolute;
  top: 56%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(-45deg);
}
@media screen and (max-width: 640px) {
.btn_brown {
  font-size: 1.05em;
  font-weight: 500;
  max-width: 280px;
  }
.btn_brown:before {
  width: 10px;
  }
.btn_brown:after {
  width: 10px;
  }
}

/* 矢印付きオレンジ角丸ボタン */
.btn_orange {
  display: block;
  position: relative;
  background: #EE7B30;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  width: 100%;
  max-width: 340px;
  padding: 10px 12px 12px;
  color: #FFF !important;
  text-align: center;
  text-decoration: none;
  font-size: 1.15em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
}
.btn_orange:hover{
  background: #C25710;
}
.btn_orange:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(45deg);
}
.btn_orange:after {
  content: "";
  position: absolute;
  top: 56%;
  right: 15px;
  width: 12px;
  height: 2px;
  background: #FFF;
  transform: rotate(-45deg);
}
@media screen and (max-width: 640px) {
.btn_orange {
  font-size: 1.05em;
  font-weight: 500;
  max-width: 280px;
  }
.btn_orange:before {
  width: 10px;
  }
.btn_orange:after {
  width: 10px;
  }
}

/* ミニボタン */
.minibtn {
  margin-left: 0.8em;
  background: #FFF;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  padding: 0.1em 0.6em 0.3em;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 0.75em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
  border: 1px solid #138BCA;
  color:#138BCA ;
  background: #FFF;
  white-space: nowrap;
}
.minibtn:hover{
  color:#FFF ;
  background: #138BCA;
}
@media screen and (max-width: 640px) {
.minibtn {
  font-size: 0.85em;
  }
}

/*-------------------------
写真ギャラリー
--------------------------*/
/* 写真ギャラリー横並び2列(640px以下で縦列切替) */
.gallery2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery2 li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding:0 12px 24px 12px;
  box-sizing: border-box;
}
.gallery2 img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery2 li {
  flex-direction: column;
  display:block;
  width: 100%;
  max-width:100%;
  padding:0 0 25px 0;
  }
}

/* 写真ギャラリー横並び2列固定 */
.gallery2_fix {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery2_fix li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding:0 12px 24px 12px;
  box-sizing: border-box;
}
.gallery2_fix img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery2_fix li {
  padding:0 6px 15px 6px;
  }
}

/* 写真ギャラリー横並び3列(640px以下で縦列切替) */
.gallery3 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery3 li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 10px 20px 10px;
  box-sizing: border-box;
}
.gallery3 img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery3 li {
  flex-direction: column;
  display:block;
  width: 100%;
  max-width:100%;
  padding:0 0 15px 0;
  }
}

/* 写真ギャラリー横並び3列固定 */
.gallery3_fix {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery3_fix li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 10px 20px 10px;
  box-sizing: border-box;
}
.gallery3_fix img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery3_fix li {
  padding:0 6px 12px 6px;
  }
}

/* 写真ギャラリー横並び3列→2列→1列 */
.gallery3_prefix {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery3_prefix li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 10px 20px 10px;
  box-sizing: border-box;
}
.gallery3_prefix img {
  width:100%;
}
@media screen and (max-width: 1000px) {
.gallery3_prefix li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  box-sizing: border-box;
  padding:0 6px 12px 6px;
  }
}
@media screen and (max-width: 640px) {
.gallery3_prefix li {
  flex-direction: column;
  display:block;
  width: 100%;
  max-width:100%;
  padding:0 0 15px 0;
  }
}

/* 写真ギャラリー3列
　 画像とキャプションが縦列→横並びにスイッチ */
.gallery3_switch {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery3_switch li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 10px 0 10px;
  box-sizing: border-box;
}
.gallery3_switch li > .caption {
  font-size: 0.85em;
  margin-top: 5px;
  line-height: 1.5;
  padding: 0 5px;
  margin-left:0;
  text-indent:0;
  text-align: center;
}
.gallery3_switch li > .caption:before{
  content:none;
}
@media screen and (max-width: 640px) {
.gallery3_switch li {
  width: 100%;
  max-width:100%;
  padding:0 0 15px 0;
  display: flex;
  align-items:center;
  }
.gallery3_switch li:last-child{
  padding:0 0 0 0;
  }
.gallery3_switch li > .img {
  width: 240px;
  }
.gallery3_switch li > .img img{
  width: 100%;
  max-width: 240px;
  }
.gallery3_switch li > .caption {
  flex: 1;
  font-size: 0.9em;
  margin-top: 0;
  padding: 0;
  line-height: 1.6;
  text-align: left;
  margin-left: 10px;
  }
}
@media screen and (max-width: 480px) {
.gallery3_switch li {
  padding:0 0 12px 0;
  }
.gallery3_switch li > .img {
  width: 180px;
  }
}

/* 写真ギャラリー2列
　 画像とキャプションが縦列→横並びにスイッチ */
.gallery2_switch {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery2_switch li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding:0 10px 15px 10px;
  box-sizing: border-box;
}
.gallery2_switch li > .caption {
  font-size: 0.95em;
  margin-top: 6px;
  line-height: 1.5;
  padding: 0 5px;
  margin-left:0;
  text-indent:0;
  text-align: center;
}
.gallery2_switch li > .caption:before{
  content:none;
}
@media screen and (max-width: 640px) {
.gallery2_switch li {
  width: 100%;
  max-width:100%;
  padding:0 0 15px 0;
  display: flex;
  align-items:center;
  }
.gallery2_switch li > .img {
  width: 240px;
  }
.gallery2_switch li > .img img{
  width: 100%;
  max-width: 240px;
  }
.gallery2_switch li > .caption {
  flex: 1;
  font-size: 0.9em;
  margin-top: 0;
  padding: 0;
  line-height: 1.6;
  text-align: left;
  margin-left: 10px;
  }
}
@media screen and (max-width: 480px) {
.gallery2_switch li > .img {
  width: 180px;
  }
}

/* 写真ギャラリーキャプション */
.caption {
  font-size: 0.9em;
  margin-top: 8px;
  line-height: 1.6;
  padding: 0 5px;
  margin-left:1em;
  text-indent:-1em;
}
.caption:before{
  content: "▲";
}

.caption2 {
  font-size: 0.9em;
  margin-top: 8px;
  line-height: 1.6;
  padding: 0 5px;
}

.caption3 {
  font-size: 0.9em;
  margin-top: 8px;
  line-height: 1.6;
  padding: 0 5px;
  text-align: center;
}

/*-------------------------
横並びflexbox
--------------------------*/
/* 幅可変横並び*/
.column {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
}
.column li{
  margin:0 15px 0 0;
}
.column li:last-child{
  margin:0 0 0 0;
}

/* 画像320px ＋ テキスト*/
.column320 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.column320_img {
  max-width: 320px;
  margin: 0 30px 0 0;
}
.column320_text {
  flex: 1;
}
@media screen and (max-width: 1000px) {
.column320_img {
  max-width: 240px;
  margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 767px) {
.column320 {
  flex-direction: column;
  display:block;
  }
.column320_img {
  max-width: 100%;
  margin: 0 0 15px 0;
  text-align: center;
  }
}

/* 均等2列(767px以下で縦列切り替え) */
.col2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.col2 li{
  width:50%;
  margin:0 30px 0 0;
}
.col2 li:last-child{
  margin:0 0 0 0;
}
@media screen and (max-width: 1000px) {
.col2 li{
  margin:0 20px 0 0;
  }
}
@media screen and (max-width: 767px) {
.col2 {
  flex-direction: column;
  display:block;
  }
.col2 li {
  width:100%;
  margin:0 0 20px 0;
  }
.col2 li:last-child{
  margin:0 0 0 0;
  }
}