@charset "utf-8";

* {
  padding: 0;
  margin: 0;
}
body{
font-family: 'TsukuARdGothic-Regular',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
width: 100%;
}

header{
background:orange;
color: #fff;
position: sticky;
position: -webkit-sticky;/*Safari用*/
top: -185px;
z-index: 1000;
}

#cont {
  background: linear-gradient(45deg, #e5dba6 0%, #e5dba6 50%, #e5b951 50%, #e5b951 100%);
  justify-content: center;
  align-items: center;
  height: 50%;
  padding-bottom: 30px;
}

h1{
  background: orange;
  font-size: 45px;
  text-align: center;
  overflow: hidden;
  color: aliceblue;
  text-shadow: 1px 0 0 brown, 0 1px 0 brown,
2px 1px 0 brown, 1px 2px 0 brown,3px 2px 0 brown, 2px 3px 0 brown,4px 3px 0 brown, 3px 4px 0 brown,5px 4px 0 brown, 4px 5px 0 brown,6px 5px 0 brown, 5px 6px 0 brown,7px 6px 0 brown, 6px 7px 0 brown,8px 7px 0 brown, 7px 8px 0 brown,9px 8px 0 brown, 8px 9px 0 brown,10px 9px 0 brown, 9px 10px 0 brown,11px 10px 0 brown, 10px 11px 0 brown,12px 11px 0 brown, 11px 12px 0 brown,13px 12px 0 brown,12px 13px 0 brown,14px 13px 0 brown, 13px 14px 0 brown,15px 14px 0 brown, 14px 15px 0 brown,16px 15px 0 brown, 15px 16px 0 brown,17px 16px 0 brown, 16px 17px 0 brown,18px 17px 0 brown, 17px 18px 0 brown,19px 18px 0 brown, 18px 19px 0 brown,20px 19px 0 brown, 19px 20px 0 brown,21px 20px 0 brown, 20px 21px 0 brown,22px 21px 0 brown, 21px 22px 0 brown,23px 22px 0 brown, 22px 23px 0 brown,24px 23px 0 brown, 23px 24px 0 brown,25px 24px 0 brown, 24px 25px 0 brown,26px 25px 0 brown,25px 26px 0 brown,27px 26px 0 brown, 26px 27px 0 brown,28px 27px 0 brown, 27px 28px 0 brown,29px 28px 0 brown, 28px 29px 0 brown,30px 29px 0 brown, 29px 30px 0 brown,31px 30px 0 brown, 30px 31px 0 brown,32px 31px 0 brown, 31px 32px 0 brown,33px 32px 0 brown, 32px 33px 0 brown,34px 33px 0 brown, 33px 34px 0 brown,35px 34px 0 brown, 34px 35px 0 brown,36px 35px 0 brown, 35px 36px 0 brown,37px 36px 0 brown, 36px 37px 0 brown,38px 37px 0 brown, 37px 38px 0 brown,39px 38px 0 brown, 38px 39px 0 brown,40px 39px 0 brown, 39px 40px 0 brown,41px 40px 0 brown, 40px 41px 0 brown,42px 41px 0 brown, 41px 42px 0 brown,43px 42px 0 brown, 42px 43px 0 brown,44px 43px 0 brown, 43px 44px 0 brown,45px 44px 0 brown, 44px 45px 0 brown,46px 45px 0 brown, 45px 46px 0 brown,47px 46px 0 brown, 46px 47px 0 brown,48px 47px 0 brown, 47px 48px 0 brown,49px 48px 0 brown, 48px 49px 0 brown,50px 49px 0 brown, 49px 50px 0 brown
}

h2{
text-align: center;
padding: 10px 0;
color: brown;
height: 60px;
animation-duration: 1s;
animation-name: slide;
	}

@keyframes slide {
from{
	opacity: 0;
	margin-left:50%;
	width:10%;
}      
to{
	color:brown;
	text-align: center;
	width:100%;
}
}


h3 {
  position: relative;
  padding: 0.8rem 1.2rem;
  margin: 1rem auto;
  border: 3px solid #f9f9f9;
  border-radius: 10px;
  color: brown;
  background: #f9f9f9;
  width: 150px;
}

h3:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

h3:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

h7{
font-weight: 600;
margin: 50px 0;
}

.pp{
margin: auto;
padding: 20px;
width: 80%;
border-radius: 20px;
background: rgba(250,250,250,0.7);
}

.privpp{
text-align: center;
}

.priv{
text-align: left;
}

p.priv{
margin: 20px;
}

.nav-list{
  background: brown;
  width: 100%;
  position: relative;
  color: #fff;
  text-align: center;
}

.nav-list li{
  display: inline-block;
  list-style: none;
  padding: 1rem;
}

.nav-list a{
  display: block;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.nav-list a:hover{
	color: orange;
	transition: 1.3s;
}

.nav-list a:hover:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px #fff;
	transform: translateX(-50%);
	animation: border_anim 0.3s linear forwards;
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

.box1{
border: 3px dotted maroon;
border-radius: 20px;
background: rgba(250, 250, 250, 0.6);
padding: 32px;
margin: 20px auto;
width: 60%;
}

.fluffy {
  text-align: center;
  background: rgba(230,230,230, 0.7);
  vertical-align: middle;
  border: 4px solid;
  border-image: linear-gradient(to top left, mediumspringgreen,plum);
  border-image-slice: 1;
  width: 250px;
  padding: 30px;
  margin: 50px auto;
  animation: fluffy1 2s ease infinite;
  pointer-events: auto;
  color: royalblue;
  font-weight: 500;
}

@keyframes fluffy1 {
  0% {transform:translate(0, 0) rotate(0deg);}
  21% {transform:translate(0, 0) rotate(0deg);}

  22% {transform:translate(0, 0) rotate(-3deg);}
  23% {transform:translate(0, -1px) rotate(0deg);}
  24% {transform:translate(0, -1px) rotate(3deg);}

  25% {transform:translate(1px, 0) rotate(-2deg);}
  26% {transform:translate(0, 1px) rotate(0deg);}
  27% {transform:translate(0, 0) rotate(3deg);}

  28% {transform:translate(0, 0) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}

#formbtn{
  background:brown;
  padding: 20px;
  pointer-events: none;
  transition: 1s;
}

#formbtn:hover{
  background: white;
  transition: 1s;
}

.fluffy:hover{
  background: linear-gradient(to top left, mediumspringgreen,plum);
  transition: 1s;
  color: white;
  font-weight: 600;
}

.icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f0a4";
}

.gallery__list {
  list-style-type: none;
  max-width: 60%;
  margin: auto;
  text-align: center;
  justify-content: space-around;
}
.gallery__item {
  max-width: 60%;
  margin: auto;
  display: inline-block;
  background: ivory;
}
.gallery__item:not(:nth-child(-n+2)) {
  margin-top: 20px;
}

.gallery__item img {

  
}
.gallery__item a {
  transition: .5s;
}

.gallery__item a:hover img {
  box-shadow: 3px 3px 0px brown;
  transform: translateY(-3px);
  transition: .3s;
}

#howto{
 padding: 50px 0;
}

.flow {
  padding: 0;
width: 100%;

}
.flow li{
  list-style-type: none;
width: 80%;
margin: auto;
}
.flow dd {
  margin-left: 0;
}

.flow > li {
  position: relative;
}
.flow > li:not(:last-child) {
  margin-bottom: 40px;
}
.flow > li:not(:first-child)::before {
  content: "";
  height: 60px;
  display: block;
  border-left: 4px dotted orange;
  position: absolute;
  top: -40px;
  left: -webkit-calc(10% + 30px - 2px);
  left: calc(10% + 30px - 2px);
  z-index: 10;
}
.flow > li dl {
background:  #fff;
  padding: 20px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid maroon;
  border-radius: 10px;
  position: relative;
}
.flow > li:not(:last-child) dl::before,
.flow > li:not(:last-child) dl::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.flow > li:not(:last-child) dl::before {
  border-width: 22px;
  border-top-color: maroon;
}
.flow > li:not(:last-child) dl::after {
  border-width: 20px;
  border-top-color: #fff;
}
.flow > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: maroon;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-right: 2vw;
  text-align: center;
}
.flow > li dl dt .icon {
  font-size: 12px;
  color: #fff;
  background: maroon;
  padding: 5px 10px;
  margin-bottom: 10px;
  display: block;
  border-radius: 20px;
  position: relative;
  z-index: 100;
}

#price{
  width: 100%;
  padding: 50px 0;
}

.pricemenu {
  width: 60%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 5px;
  font-size: 14px;
}
.pricemenu th {
  width: 20%;
  background: brown;
  color: white;
  box-sizing: border-box;
  padding: 15px;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
}
.pricemenu td {
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
  vertical-align: middle;
  text-align: left;
}

td.yenstd{
  color: maroon;
  font-weight: bold;
  border: 2px solid brown;
  text-align: center;
}

td.yenth{
border: 2px solid brown;
}

td.yen{
  text-align: center;
  font-size: 0.9rem;
  width: 18%
}

ul.kome{
 width: 55%;
 margin: auto;
 font-size: 0.8rem;
}

ul.kome li {
  list-style-type: none;
  text-indent: -1em;
  margin: 10px auto;
}
ul.kome li:before {
  display: inline;
  content: "※";
}

#aboutme{
 background: orange;
 padding: 50px 0;
}

.profile {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
}
.column {
  width: 50%;
}

.myself{
  list-style-type: none;
  background: white;
  padding: 15px;
  font-size: clamp(10px, 1.4vw, 30px);
  border-radius: 30px;
  text-align: left;
}

.myself li{
  padding: 5px;
}

.column_right{
  text-align: center;
  margin: auto;
}

img.profile_image{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.myself_icons{
  margin: 20px auto;
}

.mailicon{	
display:inline-block;
font-size:30px;
text-align:center;	
text-decoration:none;
}

.mailicon .fa-envelope-square{
color: white;
}

.mailicon span{
font-size:16px;	
position:relative;
left:8px;
bottom:6px;	
color:white;	
}

.mailicon span:hover{
 color: maroon;
 transition: .5s;
font-weight:bold;
margin:8px;	
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 70px;
  background: maroon;
  border-radius: 20%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  content: '\f077';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*----入力フォーム---------------------------------------------*/
input[type="submit"],
input[type="text"],
select,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: none;
}
 
input[type="text"]{
  background: white;
  display: block;
  font-size: 1.0em;
  width: 90%;
  text-align: left;
  transition: 0.8s;
  border-radius: 0;
}
 
input::placeholder,
textarea::placeholder {
  color: #ccc;
}
 
::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
}
 
::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
 
:-ms-input-placeholder {
  color: #ccc;
  opacity: 1;
}
 
.form-table {
  width: 80%;
  margin: auto;
}
 
.form-table th,
.form-table td {
  border: none;
  text-align: center;
  padding: 20px;
  background: white;
}
 
.form-table th {
  position: relative;
  text-align: left;
  width: 28%;
  background: orange;
}

.Required{
  background: brown;
  color: white;
  border-radius: 10px;
  font-size: 0.8em;
  font-weight: 400;
  padding: 5px;
  margin-right:10px; 
}

.inputbtn{
width: 100%;
text-align: center;
}

.Form-Btn{
 background: maroon;
 color: white;
 border-radius: 10px;
 padding: 10px;
 width: 200px;
 margin: 20px auto;
 text-align: center;
}

.radiobutton {
  display: none;
}
label {
  background-color: lightgray;
  padding: 10px 20px;
}
.radiobutton:checked + label {
  background-color: brown;
  color: white;
}

/*----入力フォーム終了---------------------------------------------*/

.footer-menu{
  padding: 10px 50px;
  text-align: right;
  font-size: 0.9rem;
}

.footer-menu li{
  display: inline;
  list-style:none;
}

.footer-menu a{
  text-decoration: none;
  margin: 0 10px;
  color: orange;
}

.footer-menu a:hover{
 color: orange;
}

p.copyright{
  text-align:center;
}


@media screen and (max-width: 641px) {

.nav-list{
font-size: 0.8rem;
}

.gallery__list {
  max-width: 100%;
}
.flow > li dl dt {
font-size: 10pt;
}

.footer-menu{
   text-align: center;
 padding: 0;
}

.footer-menu li{
 display: list-item;
 background: brown; 
 padding: 10px;
 border-bottom: 1px solid #fff;
}

.footer-menu a{
 color: #fff;
}

.footer-menu a:hover{
 color: orange;
}

.pricemenu{
 width: 90%;
}

.pricemenu th{
background: maroon;
color: white;
}

.pricemenu th, td {
    display: block;
    width: 100%;
    
  }

td.yen {
    width: 100%;
    border-bottom: 2px solid maroon;
    
  }

ul.kome{
    width: 80%;
}

.column {
    width: 100%;
    order: 1;
  }

.myself_icons{
  margin: auto;
}

.column_right{
  text-align: center;
  margin:20px auto;
}

input[type="text"]{
  padding: 10px;
  width: 95%;
}

.form-table th,
.form-table td {
  display: block;
  width: 100%;
  margin: auto;
  margin-left: -20px;
  border-bottom: none;
  text-align: center;
}
}