@charset "utf-8";

div.container {
max-width: 700px;
margin: 0px auto;
}

/*--------------------header--------------------*/

header.header{
width: 100%;
height: 86vh;
background: url(../img/header/omiya_top.jpg) no-repeat center;
background-size: cover;
position: relative
}

header.header:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
top:0x;
left: 0px;
background: #FFFFFF;
background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/*--------------------menu--------------------*/

menu.menu{
width: 100%;
max-width: 700px;
height: 100%;
background: #fff;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
z-index: 10;
display: none
}

li.menu{
width: 100%;
position: absolute;
top:50%;
transform: translateY(-50%);
padding: 0px 10%
}

a.menu{
color: #cc3918;
display: block;
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
font-size: 14px;
border-bottom: solid 1px #efefef;
padding: 15px 0px
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
max-width: 700px;
height: 80px;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
z-index: 12;
display: flex;
align-items: center;
padding: 0px 5%;
justify-content: space-between
}

a.nav_logo{
width: 46%
}

div.menu-trigger{
width: 64px;
height: 64px;
background: #cc3918;
position: relative;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
width: 24px;
height: 14px;
}

p.menu-trigger{
font-size: 10px;
color: #fff;
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
}

a.menu-trigger span {
position: absolute;
right: 0;
width: 100%;
height: 1px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 6px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);

}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

ul.header{
width: 94%;
display: flex;
align-items: start;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%)
}

li.header_left{
width: 62%;
position: relative;
top:60px
}

article.header{
text-align: center;
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
font-style: normal;
white-space: nowrap;
}

h2.header{
font-size: 30px;
line-height: 1.2;
margin-bottom: 10px
}

h1.header{
font-size: 18px;
margin-bottom: 20px
}

h4.header{
font-size: 56px;
display: flex;
align-items: end;
letter-spacing: -1px;
margin-bottom: 15px
}

h4.header small{
font-size: 50%;
position: relative;
top:10px
}

h3.header{
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px
}

h3.header:before{
content: "";
width: 24px;
height: 24px;
position: relative;
top:3px;
background: url(../img/header/line.png) no-repeat center;
background-size: cover;
margin-right: 5px
}

li.header_right{
width: 38%;
}

a.header_link{
width: 90%;
height: 50px;
display: block;
border-radius: 6px;
line-height: 50px;
margin: 0px auto 20px auto;
display: flex;
align-items: center;
justify-content: center
}

a.red{
background: #cc3918;
color: #fff;
gap: 10px
}

a.red:after{
content: "";
width: 16px;
height: 16px;
background: url(../img/icon/link.png) no-repeat center;
background-size: cover
}

a.white{
background: #fff;
border:solid 1px #cc3918;
color: #cc3918;
gap: 20px
}

a.white:after{
content: "";
width: 16px;
height: 16px;
background: url(../img/icon/arrow.png) no-repeat center;
background-size: cover
}

img.header_iphon{
width: 20%;
position: absolute;
right: 8%;
transform: rotate(10deg) translateY(30%);
bottom: 0px;
}

div.banner{
width: 90%;
margin: 0px auto;
padding: 30px 0px
}

img.banner{
margin-bottom: 15px
}

h3.banner{
font-size: 15px;
margin-bottom: 10px
}

ul.banner {
list-style: none; /* デフォルトの点を消す */
margin: 0;
padding: 0;
}

ul.banner li {
position: relative;
padding-left: 1em;
line-height: 1.7;
margin-bottom: .1em;
font-size: 10px;
}

ul.banner li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
}

/*--------------------about--------------------*/

section#about{
padding: 30px 0px 60px 0px
}

img.about_image{
margin-bottom: 20px
}

h4.about_cap{
width: 80%;
font-size:11px;
margin: 0px auto 5px auto;
font-weight: 500
}

h4.about_cap:nth-of-type(3){
margin-bottom: 30px
}

article.about{
width: 80%;
margin: 0px auto 30px auto;
}

h2.about{
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
margin-bottom: 20px
}

p.text{
font-size: 12px;
line-height:1.8;
letter-spacing: -0.05em;
text-align: justify
}

div.news_page_share{
display: flex;
align-items: center;
gap: 15px;
margin-top: 30px
}

a.news_page_share{
display: block;
height: 16px;
}

a.news_page_share img{
height: 16px;
}

article.client{
width: 80%;
margin: 0px auto;
}

h3.client{
font-size:22px;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 30px
}

h3.client:before{
content: "";
width: 26px;
height: 26px;
background: url(../img/icon/933a6dafb18b0015cb30aeed8c3637ea.png) no-repeat center;
background-size: cover
}

div.client_grid{
display: grid;
grid-template-columns: 1fr 1fr ;
gap: 12px;
}

p.client_grid{
border:solid 1px #dcdcdc;
height: 46px
}

/*--------------------method--------------------*/

section#method{
background: #fef6eb;
padding: 60px 10% 60px 10%
}

h3.method,h2.method{
text-align: center;
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
position: relative;
z-index: 1
}

h3.method{
font-size:18px;
margin-bottom: 10px
}

h2.method{
font-size:28px;
letter-spacing: 0.05em;
margin-bottom: 10px
}

img.method{
width: 30%;
margin: 0px auto 20px auto
}

article.method{
margin-bottom: 40px;

}

img.method_image{
margin-bottom: 20px;
}

h3.method_title{
font-size:20px;
margin-bottom: 20px;
text-align: center;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
}

h3.method_title span{
color: #cc3918
}

p.method{
text-align: justify;
line-height: 1.8
}

div.method_grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

h4.method_grid{
background: #cc3918;
color: #fff;
text-align: center;
padding: 15px 0px;
border-radius: 5px
}

/*--------------------remind--------------------*/

section#remind{
padding: 60px 10% 60px 10%
}

p.read{
text-align: center;
margin-top: 20px;
margin-bottom: 40px;
position: relative;
z-index: 1
}

article.remind{
margin-bottom: 40px;
position: relative;
z-index: 1
}

h3.remind{
font-family: "Zen Old Mincho", serif;
font-weight: 700;
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 20px;
font-size: 16px;
}

h3.remind:before{
content: "";
width: 24px;
height: 24px;
background: url(../img/icon/933a6dafb18b0015cb30aeed8c3637ea.png) no-repeat center;
background-size: cover;
}

h4.remind{
font-size: 18px;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 30px;
display: flex;
align-items: center;
line-height: 1.4
}

span.remind{
font-size: 150%;
color: #cc3918;
position: relative;
top:-2px
}

img.remind{
margin-bottom: 10px
}

/*--------------------substitute--------------------*/

section#substitute{
padding: 60px 10% 60px 10%;
background: url(../img/substitute/image.png) no-repeat top center;
background-size: 100%;
position: relative
}

section#substitute:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
background: rgba(255,255,255,0.7)
}

article.substitute{
background: #fff;
padding: 20px;
border-radius: 15px;
position: relative;
z-index: 1;
box-shadow: 3px 3px 3px #dcdcdc;
margin-bottom: 20px
}

img.substitute_image{
margin-bottom: 30px
}

h3.fee{
text-align: center;
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
position: relative;
z-index: 1;
font-size:22px;
margin-bottom: 20px;
margin-top: 40px
}

h5.fee{
font-size: 18px;
line-height: 1.6;
font-weight: 400
}

small.fee{
font-size: 12px;
}

/*--------------------voice--------------------*/

section#voice{
padding: 30px 5%;
background: url(../img/voice/back.jpg) no-repeat top center;
background-size: cover;
position: relative;
color: #fff
}

section#voice:before{
content: "";
width: 100%;
height: 100%;
background: rgba(204,57,24,0.7);
position: absolute;
top:0px;
left: 0px;
}

div.voice{
width: 100%;
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 20px
}

p.voice_image{
width: 30%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden
}

h3.voice{
color: #000;
margin-bottom: 8px
}

h4.voice{
color: #000;
margin-bottom: 8px;
font-size:12px;
}

h5.voice{
color: #000;
font-size: 25px;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
}

h2.voice{
color: #000;
font-size:14px;
}

p.method{
color: #000
}

/*--------------------footer--------------------*/

footer.footer{
padding: 30px 0px 100px 0px;
text-align: center;
position: relative;
border-top:solid 1px #dcdcdc
}

p.totop{
width: 40px;
height: 52px;
border:solid 2px #dcdcdc;
border-radius: 5px;
background: #fff;
position:absolute;
right: 5%;
top:-26px
}

p.totop img{
width: 50%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0.7
}


img.footer_logo{
width: 40%;
margin: 0px auto
}

footer.footer div.news_page_share{
justify-content: center;
margin-bottom: 30px
}

div.footer_link{
width: 94%;
max-width: 700px;
left: 50%;
transform: translateX(-50%);
position: fixed;
bottom: 0px;
display: flex;
align-items: center;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}

div.footer_link.visible {
opacity: 1;
pointer-events: auto;
}

div.footer_link a.header_link{
width: 48%;
text-align: center;
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
}

/*--------------------contact--------------------*/

section#contact{
padding: 30px 5% 60px 5%;
}

section#contact h2{
color: #d91023;
}

p.contact{
margin-bottom: 5px;
font-size: 14px;
font-weight: 500
}

p.content_lead{
font-size: 14px;
font-weight: 500;
margin-bottom: 30px
}

label.input{
width: 100%;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
color: #000;
margin-bottom: 20px;
}

input[type="text"],input[type="email"],input[type="tel"]{
width: 100%;
height: 100%;
border:none;
background: transparent;
font-size:15px;
padding-left: 10px;
font-weight: 500
}

label.select{
width: 50%;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
color: #000;
position: relative;
margin-bottom: 20px
}

label.select:after{
content: '▼';
position: absolute;
top:50%;
transform: translateY(-50%);
right: 10px
}

select{
width: 100%;
height: 100%;
border:none;
background: #fff;
appearance: none;
padding-left: 10px
}

label.short{
width: 70%!important
}

label.textarea{
width: 100%;
height: 150px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
margin-bottom: 15px;
color: #000;
}

textarea {
font-weight: 500;
width: 100%;
height: 100%;
padding: 10px;
font-size: 15px;
line-height: 1.5;
background: transparent;
resize: vertical; 
border:none;
padding: 15px
}

input[type="submit"],input[type="button"]{
width: 80%;
max-width: 300px;
height: 50px;
display: block;
background: #d91023;
-webkit-appearance: none;
border:none;
font-weight: 600;
color:#fff;
border-radius: 5px;
}

input[type="submit"]:hover,input[type="button"]:hover{
cursor: pointer;
opacity: 0.7;
}

a.complete{
width: 80%;
max-width: 300px;
text-align: center;
line-height: 50px;
height: 50px;
color: #fff;
display: block;
background: #999;
border-radius: 5px;
margin-top: 20px
}

div.check{
font-weight: 500;
margin-bottom: 30px
}

input[type="checkbox"]{
width: 100%;
height: 100%;
border:none;
box-shadow: none;
border-radius: 0px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

a.checkbox{
text-decoration: underline;
font-weight: 500
}

a.checkbox:hover{
text-decoration: none;
}

ol.contents {
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
width: 100%; 
margin: 0px auto;
text-align: right;
padding: 15px 4%
}

ol li{
display:inline-block;
vertical-align: middle
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

a.breadcrumb span{
text-decoration: none;
font-weight: 500;
font-size:12px;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

/*--------------------privacy--------------------*/

article.privacy{
width: 100%;

margin: 0px auto;
padding: 15px;

margin-bottom: 20px;
text-align: justify;

}

h5.privacy{
font-size:15px;
margin-bottom: 15px;
color:#444;
}

p.privacy{
font-size:12px;
line-height: 1.8;
margin-bottom: 30px;
color:#444;
font-weight: 500
}