@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body{
	font-family: "Noto Sans JP", sans-serif;
	margin:0;
	font-weight:normal;
	color:#343434;
	background-color:#FFF;
	/*background-color:#FFF8E2;*/
	font-size:18px;
	line-height:160%;
	letter-spacing:0.1rem;
	height:100%;
}

a{
	text-decoration:underline;
	color:#FF9933;
}
a:hover{color:#FFC285;
text-decoration:underline;}
a[target="_blank"]{position:relative;padding-right:20px;display:inline-block;}
h1,h2,h3,h4,strong{font-weight:700}
img {
	width:auto;
	max-width:100%;
	height:auto;
}
p {
  margin-bottom:16px;
  line-height:1.7;
}

.pc{display :none;}
@media only screen and (min-width: 768px) {
.pc{display :block;}
.sp{display:none;}
p {
  margin-bottom:24px;
}
}

header{
	text-align:left;
	border-bottom:1px solid #CCCCCC;
position:fixed;
top:0;
	width:100%;
	z-index:9;
	background-color:#FFF;
	/*background-color:#FFF8E2;*/
}
@media only screen and (min-width: 768px) {
header{
	padding:10px 16px 30px;
	text-align:center;
	height:50px;
}
.headCont{
	display: flex;
  justify-content: center;
  align-items:center;
  position: relative;
}
h1{
  width:60%;
}
p.htel{
  width:25%;
  margin-bottom:0;
}
.htel img{
	width:100%;
	height:auto;
}
}
@media only screen and ( max-width : 769px ) {
header{
	padding:10px 10px;
	height:40px;
}
header img{
	max-width:45%;
}
.headCont{
	display:none;
}
}
#wrap{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin:0 auto;
	max-width:1280px;
	position:relative;
	padding-top:60px;
}
#navCont{
	width:100%;
}
main{
	width:100%;
}
@media only screen and (min-width: 768px) {
#wrap{
	padding-top:86px;
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
}
#navCont{
	flex: 0 0 280px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
}
main{
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	border-left:1px solid #CCCCCC;
}

}
#visual{
	margin-bottom:0;
	text-align:center;
	line-height:0;
	width:100%;
}
@media only screen and (min-width: 768px) {
}
.container {
	margin: 0 auto 0 auto;
	padding: 0;
	max-width: 1280px;
}

footer .container {
	border-top:1px solid #CCCCCC;
	padding:16px 20px;
}
.ftBlock{
	padding:0;
	margin-bottom:20px;
}
.ftBlock .ftBox{
	margin-bottom:10px;
}
.ftBlock .ftLink{
	text-align:center;
	margin-bottom:10px;
}
footer p.add{
	font-size:12px;
	text-align:center;
}
@media only screen and (min-width: 768px) {
footer .container {
	padding:40px 30px;
}
.ftBlock{
	margin-bottom:30px;
	display:flex;
	flex-flow: row;
}
.ftBlock .ftBox{
	margin-bottom:0;
	flex: 1 1 auto;
	order: 1;
}
.ftBlock .ftLink{
	flex: 0 0 300px;
	order: 2;
	margin-left:20px;
	text-align:right;
}
footer p.add{
	font-size:14px;
}
}

#nav li a {
  display: block;
  color: #1B325E;
  position: relative;
  font-weight:bold;
	text-decoration:none;
}
#nav li a::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top:42%;
    right: 13px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 2px solid #1B325E;
    border-right: 2px solid #1B325E;
    transform: rotate(45deg);
}

@media only screen and ( max-width : 769px ) {
  .overlay {
    width: 0;
    height: 0;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
    background: rgba(255,255,255,.7);
  }
  .overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #main {
    transition: all .5s;
    min-height: 100vh;
  }
  #main.open {
    position: fixed;
    width: 100%;
  }
  #menu_btn {
    top: 7px;
    right: 10px;
    transition: .3s;
    cursor: pointer;
    position: fixed;
    z-index: 9999;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	background-color:#333;
  }
  .menu-trigger {
    width: 18px;
    height: 16px;
    position: relative;
  }
  .menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #FFF;
    transition: all .5s;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    width: 70%;
    top: 7px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg);
  }
  #menu_btn.active .menu-trigger span:nth-of-type(2) {
    opacity: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(3) {
    transform: translateY(-7px) rotate(45deg);
  }
  #nav {
    width: 280px;
    height: 100%;
    overflow: auto;
    padding: 40px 0 10px;
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12;
    transform: translate(280px);
    transition: all .5s;
  }
  #nav.open {
    transform: translateZ(0);
  }
  #nav li {
    padding: 0 20px;
  }
  #nav li a {
    position: relative;
    padding: 10px;
    color: #fff;
	border-bottom:1px solid #FFF;
  }
#nav li a::after{
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
}
  #nav .menu-item-has-children .sub-menu {
    padding: 20px;
  }
  #nav .menu-item-has-children > a.open:first-of-type {
    color: #dad4ec;
  }
  #nav .menu-item-has-children .sub-menu li {
    padding: 0;
    margin-bottom: 20px;
  }
  #nav .menu-item-has-children .sub-menu li:last-child {
    margin-bottom: 0;
  }
  #nav .menu-item-has-children .sub-menu li a {
    padding: 0;
  }
  .bt_contact a{
  color:#FFF;
  background-color:#FF9933;
  display:block;
  text-align:center;
  padding:5px 5px;
  margin:0;
  font-weight:bold;
  width:30%;
  position:fixed;
  top:8px;
  right:56px;
  font-size:12px;
	text-decoration:none;
  }
}

@media print, screen and ( min-width : 768px ) {
  #menu_btn,.overlay {
    display: none;
  }
  #nav{
  	/*position: fixed;*/
	width:280px;
	}

  #nav ul {
  	background-color:#E3EFD0;
	margin-bottom:30px;
  }
  #nav li {
    position: relative;
	margin-right:0; }
  #nav li a {
    padding: 20px 20px;
	border-bottom:1px solid #CCCCCC;
  }
  .bt_contact a{
  color:#FFF;
  background-color:#FF9933;
  display:block;
  text-align:center;
  padding:30px 10px;
  margin:10px;
  font-weight:bold;
	text-decoration:none;
  }
}