@charset "utf-8";
html     ,
body     ,
article  ,
section  ,
div      ,
h1       ,
h2       ,
h3       ,
h4       ,
h5       ,
dl       ,
dt       ,
dd       ,
ul       ,
ol       ,
li       ,
p        ,
input    ,
select   ,
textarea {
	margin:0;
	padding:0;
	font-family: "Zen Maru Gothic", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
	color: #12222b;
	font-size: 15px;
	font-feature-settings: "palt"1;
	line-height: 2;
	letter-spacing: 0.1em;
	-webkit-text-size-adjust: 100%;
	border:none;
}

html {
	overflow-y:scroll;
	margin-bottom:1px;
	height:100%;
}

@media (max-width:640px){
html     ,
body     ,
article  ,
section  ,
div      ,
h1       ,
h2       ,
h3       ,
h4       ,
h5       ,
dl       ,
dt       ,
dd       ,
ul       ,
ol       ,
li       ,
p        ,
input    ,
select   ,
textarea {
	font-size: 1.07rem;
	line-height: 1.7;
}
}

@media only screen and (min-width:641px){.sp { display:none !important;}}
@media only screen and (max-width:640px){.pc { display:none !important;}}

/* 共通 */
a{text-decoration: none; font-weight: 700;  transition: .5s;}
h1.title{font-size: 2.5rem; text-align: center; line-height: 1.2; font-weight: 700; background: url("../img/share/title.png"); background-position: 50% 90%; background-repeat: no-repeat; padding-bottom: 20px;}
h1.title span{font-size: 1rem; text-align: center; display: block; color: #707070;}
h2{font-size: 1.5rem;}
h3{font-size: 1.3rem;}
p{font-size: 1rem;}
#container{background: url("../img/share/bg.jpg"); background-repeat: repeat; background-attachment: fixed;}

@media only screen and (max-width:640px){
h2{font-size: 1.7rem;}
h3{font-size: 1.5rem;}
p{font-size: 1.2rem;}
}

/* header */
header{display: flex; justify-content:space-between; position: absolute; z-index: 100; top:20px; width: 100%;}
header h1{margin-left: 30px;}
header h1 a img{width: 100%;}
header h1 a:hover{opacity: .5;}
header h1 a img.top{display: none;}
header h1 a img.nomal{display:block;}
#top header h1 a img.nomal{display: none;}
#top header h1 a img.top{display: block;}
header nav ul{display: flex; margin: 35px 30px 0 0; flex-wrap: wrap;}
header nav ul li{margin: 0 20px 0; position: relative;}
#top header nav.index ul li a{color: #fff; text-shadow: 0px 0px 5px #000; font-size: 1.2rem;}
header nav ul li a{color: #12222b; font-size: 1.2rem;}
header nav ul li a:hover{color: #3786c7;}
#top header nav.index ul li a:hover{color: #fff;}

@media (max-width:640px){
header h1{margin: 10px 0 0 30px;}
header h1 img{width: 80%;}
#top header nav.index ul li a{color: #12222b; text-shadow: none;}
#top header nav.index ul li a:hover{color: #12222b;}
.hamburger {
  position: fixed;
  top: 40px;
  right: 0;
  z-index: 100;
  width: 60px;
  height: 60px;
  border: none;
  background: #fff;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  cursor: pointer;
  box-shadow: -3px 3px 6px 0px rgba(0, 0, 0, 0.45);
}
.hamburger__line {
  position: absolute;
  left: 19px;
  width: 26px;
  height: 4px;
  background-color: #3786c7;
  transition: all .4s;
}
.hamburger__line:nth-of-type(1) {top: 20px;}
.hamburger__line:nth-of-type(2) {top: 29px;}
.hamburger__line:nth-of-type(3) {top: 38px;}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {transform: translateY(9px) rotate(-45deg);}
.hamburger.active .hamburger__line:nth-of-type(2) {opacity: 0;}
.hamburger.active .hamburger__line:nth-of-type(3) {transform: translateY(-9px) rotate(45deg);}
header nav {
  position: fixed;
  top: 100px;
  right: -10px;
  width: 250px;
  height: 380px;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform .4s;
  z-index: 100;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  box-shadow: -3px 3px 6px 0px rgba(0, 0, 0, 0.45);
}
header nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
header nav.active {transform: translateX(0);}
header nav ul{margin: 0; padding:25px 0 0;}
header nav ul li{width: 70%; margin: 20px auto 0 !important; text-align: center; padding-bottom:20px; border-bottom: dotted 1px #12222b;}
header nav ul li a{color: #12222b; text-shadow: none; font-size: 1.2rem;}

}


/* footer */
footer{background: url("../img/share/footer.png"); padding:50px 20px 30px; margin-top: 100px;}
footer nav ul{display: flex; margin: 10px auto 30px; justify-content: center; flex-wrap: wrap; max-width: 700px; width: 100%;}
footer nav ul li{margin: 0 20px 0;}
footer nav ul li a{color: #fff; font-size: 1rem;}
footer nav ul li a:hover{opacity: .5;}
footer small{text-align: center; margin: 0 auto; display: block; color: #fff; font-weight: 400;}

@media only screen and (max-width:640px){
    footer nav ul{max-width: 400px; width: 100%;}
    footer nav ul li{width: 40%; margin: 10px 20px;}
    footer nav ul li a{font-size: 1.2rem;}
}

/* btn */
.btn a ,
.submit .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 300px;
	height: 60px;
	color: #fff;
    background: #f3a046;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
    margin: 20px auto 0;
    border-radius: 50vw;
}
.btn a:hover,.submit .btn:hover {color: #f3a046;}
.btn a::after,.submit .btn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff;
}
.btn a:hover, .submit .btn:hover{background-color: #fff; border: 1px solid #f3a046;}
.btn a:hover::after ,.submit .btn:hover::after{border-color: #f3a046 #f3a046 transparent transparent;}
a.btn2::after {
	content: '';
	position: absolute;
	top: 120%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	background-color: #3786c7;
	border-radius: 50%;
	transition: 0.3s;
}
#top header nav.index a.btn2::after {background-color: #fff;}
header nav a.btn2::after {background-color: #3786c7;}
a.btn2:hover::after,a.now::after {width: 8px; height: 8px;}

.btn input {
	display: block;
	width:100%;
	height:100%;
}

.kengaku{
position: fixed;
bottom: 50px;
right: 20px;
transition: 0.3s;
}
.kengaku a:hover img{animation: poyo .8s ease;}
@keyframes poyo {
    0%   { transform:translateY(0);}
    16%  { transform:translateY(-15px);}
    48%  { transform:translateY(2px);}
    80%  { transform:translateY(-2px);}
    100% { transform:translateY(0);}
}

@media (max-width:640px){
a.btn2::after {
	content: '';
	position: absolute;
	top: 35%;
	left: 10%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	background-color: #3786c7;
	border-radius: 50%;
	transition: 0.3s;
}
header nav.index a.btn2::after {background-color: #fff;}
header nav a.btn2::after {background-color: #3786c7;}
a.btn2:hover::after,a.now::after {width: 0; height:0;}
.kengaku{
position: fixed;
bottom: 100px;
right: 0;
transition: 0.3s;
}
}