@charset "utf-8";
/* CSS Document */
/*メイン #a3b9e0
文字とか #fff9f5
サブ #6c2735　#eeeaec
差し色 #e39fa5*/
.clearfix::after {
		content: "";
		display: block;
		clear: both;
}
html {
		/*scroll-behavior: smooth;*/
}
body {
		font-family: "Kiwi Maru", serif;
		font-weight: 400;
		font-style: normal;
}
header {
		width: 100%;
		height: 100px;
		background-color: #a3b9e0;
		position: fixed;
		z-index: 9999;
		top: 0;
}
.container {
		width: 1000px;
		height: 100px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
}
h1 {
		color: #6c2735;
}
h2 {
		color: #6c2735;
}
nav {
		height: 100px;
		display: flex;
		align-items: flex-end;
}
nav ul {
		list-style-type: none;
		width: 450px;
		height: 30px;
		display: flex;
}
nav ul li {
		width: 150px;
		height: 30px;
		border-left: 1px solid #fff9f5;
}
nav ul li:last-child {
		border-right: 1px solid #fff9f5;
}
nav ul li a {
		display: block;
		text-align: center;
		line-height: 30px;
		text-decoration: none;
		color: #fff9f5;
		text-transform: uppercase;
}
nav ul li a:hover {
		border-bottom: 2px solid #e39fa5;
}
main {
		width: 1000px;
		margin: 100px auto;
		padding-top: 170px;
}
#slider {
		width: 100%;
		height: 400px;
		margin-bottom: 100px;
		background-color: #eeeaec;
}
#slider img {
		max-width: 100%;
}
article {
		width: 100%;
		min-height: 500px;
		box-shadow: 0 0 3px #a3b9e0;
		margin-bottom: 100px;
		border-radius: 10px 50px 10px 50px;
		padding: 0 30px 50px;
		/*overflow: hidden;*/
}
article h2 {
		font-size: 2rem;
		text-transform: capitalize;
		border-left: 10px solid #a3b9e0;
		padding: 20px 0 0 10px;
		margin-bottom: 40px;
		/* text-shadow: 2px 2px 1px #eeeaec;*/
}
footer {
		background-color: #a3b9e0;
		color: #fff9f5;
		width: 100%;
		height: 70px;
		text-align: center;
		padding-top: 20px;
}
/*profile*/
dl {
		width: 100%;
		color: #6c2735;
}
dt {
		width: 20%;
		float: left;
}
dd {
		width: 79%;
		float: right;
}
dd, dt {
		padding: 30px 0;
		border-top: 1px solid #eeeaec;
}
dt:last-of-type {
		border-bottom: 1px solid #eeeaec;
}
dd:last-child {
		border-bottom: 1px solid #eeeaec;
}
section h3 {
		text-align: center;
		font-weight: normal;
		margin-bottom: 30px;
}
.wrapper {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}
h3 {
		color: #6c2735;
}
#more{
	text-align: right;
}
figcaption {
		color: #6c2735;
}
figure {
		width: 200px;
		margin-bottom: 30px;
}
figure img {
		width: 200px;
		height: 200px;
		object-fit: cover;
		border-radius: 25%;
}
/*contact*/
table {
		width: 100%;
		border-collapse: collapse;
}
th {
		width: 30%;
		font-weight: normal;
}
td {
		width: 70%;
}
th, td {
		padding: 30px 0;
		border-top: 1px solid #6c2735;
		border-bottom: 1px solid #6c2735;
		color: #6c2735;
}
tr:nth-child(odd) {
		background-color: #eeeaec;
}
tr:nth-child(even) {
		background-color: #fff9f5;
}
input[type="text"] {
		width: 50%;
		border: 1px solid #999;
}
input[type="email"] {
		width: 80%;
		border: 1px solid #999;
}
textarea {
		width: 90%;
		height: 10em;
		resize: none;
		border: 1px solid #999;
}
input[type="submit"] {
		padding: 5px 30px;
		border: 1px none #999;
		border-radius: 5px;
		background-color: #a3b9e0;
		/*	background-image: linear-gradient(#fff9f5, #6c2735);*/
		transition: opacity 0.2s ease;
}
input[type="submit"]:hover {
		opacity: 0.8;
}
input[value] {
		color: #fff9f5;
}
form p {
		margin-top: 40px;
		text-align: center;
}
.thanks {
		text-align: center;
}
.thanks h1 {
		border-bottom: 1px dashed;
}
.thanks h2 {}
p {
		text-align: center;
}
button {
		color: #fff9f5;
		padding: 5px 30px;
		border: 1px none #999;
		border-radius: 5px;
		background-color: #a3b9e0;
		/*	background-image: linear-gradient(#fff9f5, #6c2735)*/ ;
		transition: opacity 0.2s ease;
}
button:hover {
		opacity: 0.8;
}
button[type="button"] {
		padding: 5px 30px;
}
h1 svg {
		height: 40px;
}
path {
		fill: none;
		stroke: #6c2735; /*線の色を指定する*/
		stroke-dasharray: 2000; /*線の間隔を指定する*/
		stroke-dashoffset: 0; /*線の位置を指定する(IEは効かない属性)*/
		stroke-width: 1; /*線の太さを指定する*/
		animation: hello 3s ease-in forwards;
}
/*ラジオボタン*/
.my-radio {
		accent-color: #e39fa5;
	}
@media screen and (max-width: 480px) {
		/* 480pxまでの幅の場合に適応される */
		main {
				width: 100%;
		}
		.container {
				flex-direction: column;
		}
		h1 svg {
				height: 35px;
		}
	#slider{
		 display: none;
	}
	dt, dd{
		float: none;
		width: 100%;
		text-align: center;
	}
	dt:last-of-type{
		border-bottom: none;
	}
	dt{
		background-color: #eeeaec;
	}
	dd{
		background-color: #fff;
	}
	.wrapper{
		justify-content: center;
		text-align: center;
	}
	table{
		border-bottom: 1px solid #000;
	}
	tr:nth-child(even), tr:nth-child(odd){
	background-color: transparent;	
	}
	td, th{
		display: block;
		width: 100%;
	}
	th{
		background-color: #eeeaec;
	}
	td{
		border: none;
		text-align: center;
	}
	/*ナビゲーション*/
	nav{
		align-items: flex-start;
	}
	nav ul{
		flex-direction: column;
	}
	nav ul li{
		margin-left: 0;
		display: block;
		border: none !important;
		height: 40px;
	}
	
	/*＝＝＝＝＝＝ハンバーガーメニュー＝＝＝＝*/
.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 150px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 40px;
  background-color: rgba(255,255,255,0.30);
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}
.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
	text-align: center;
}
.global-nav__item {
  text-align: center;
  border-bottom: 1px solid #eee !important;
padding-bottom: 10px;
}
.global-nav__item a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #6c2735;
}
.global-nav__item a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background-color: #eeeaec;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 20px;
}
.hamburger__line--3 {
  top: 26px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
}