@charset "utf-8";
/* レイアウトのためのCSS */
body {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
color: #555;
font-size: 1rem;
line-height: 1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
letter-spacing: 0.1em;
}
body.appear {
background: #f8f9fa;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #555;
outline: none;
}
a:hover {
color: #555;
opacity: 0.5 ;
text-decoration: none;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
* {
box-sizing: border-box
}
/* heading */
#menu h2, #blog h2 {
font-size: 4rem;
text-align: center;
margin: 0 0 50px 0;
font-weight: normal;
color: #e2a2b1;
}
@media screen and (max-width:768px) {
#menu h2, #blog h2 {
font-size: 3rem;
}
}
/* area */
#container {
overflow-x: hidden;
}
.inner {
width: 100%;
margin: 0 auto;
padding: 70px;
}
@media screen and (max-width:940px) {
.inner {
padding: 30px;
}
}
/* header */
.header-area {
color: #996600;
}
.header-area h1 {
display: block;
font-size: 4vw;
font-weight: normal;
line-height: 1.3;
letter-spacing: 0;
font-family: 'Noto Serif JP';
}
.header-area h2 {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 1.3;
letter-spacing: 0;
font-family: 'Noto Serif JP';
padding-top: 20px;
flex: 1.75 0 0;
}
.header-area-p {
font-size: 1.3vw;
flex: 1.75 0 0;
margin-top: 15em;
}
.header-area p br {
display: none;
}
@media screen and (max-width:960px) {
.header-area h1 {
font-size: 4rem;
}
.header-area p {
font-size: 0.8rem;
whitewhite-space: no
}
.header-area p br {
display: block;
}
}
/* gnavi */
#g-nav-list li:nth-of-type(1) a {
/* font-size: 2rem;
text-transform: none;
font-weight: normal;
line-height: 1;
white-space: nowrap;
margin: 0 0 20px 0;*/
}
#g-nav-list li:nth-of-type(2) {
animation-delay: .2s;
}
#g-nav-list li:nth-of-type(3) {
animation-delay: .4s;
}
#g-nav-list li:nth-of-type(4) {
animation-delay: .6s;
}
#g-nav-list li:nth-of-type(5) {
animation-delay: .8s;
}
#g-nav-list li:nth-of-type(6) {
animation-delay: 1.1s;
}
#g-nav-list li:nth-of-type(7) {
animation-delay: 1.3s;
}
/* lead */
#lead {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 140px;
}
#lead .lead-img {
width: 46%;
min-height: 400px;
background: url("../img/lead.jpg") no-repeat center;
background-size: cover;
}
#lead .lead-area {
width: 52%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row-reverse;
}
@media screen and (max-width:1060px) {
#lead .lead-img {
width: 30%;
}
#lead .lead-area {
width: 68%;
}
}
@media screen and (max-width:768px) {
#lead {
flex-direction: column-reverse;
}
#lead .lead-img, #lead .lead-area {
width: 100%;
}
#lead .lead-img {
min-height: 250px;
}
#lead .lead-area {
margin: 0 0 140px 0;
min-height: 20em;
justify-content: center;
}
}
#lead .lead-area h2, #lead .lead-area p, #lead .lead-area .lead-btn a {
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}
#lead .lead-area h2 {
width: 28%;
line-height: 2.5;
font-size: 1.4rem;
}
#lead .lead-area p {
width: 48%;
padding: 50px 0 0 0;
line-height: 2.8;
}
#lead .lead-area .lead-btn {
width: 10%;
position: relative;
top: 240px;
}
#lead .btn04 {
padding: 20px 15px;
}
@media screen and (max-width:1300px) {
#lead .lead-area h2 {
line-height: 2;
}
#lead .lead-area p {
line-height: 2.3;
}
}
@media screen and (max-width:768px) {
#lead .lead-area .lead-btn {
width: 100%;
top: 50px;
text-align: center;
}
.btn04 {
width: 250px;
}
#lead .lead-area h2, #lead .lead-area p {
width: auto;
}
#lead .lead-area h2 {
margin: 0 0 0 20px;
line-height: 2.2;
}
#lead .lead-area p {
line-height: 2;
}
#lead .lead-area .lead-btn a {
-ms-writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}
#lead .btn04 {
padding: 10px 30px;
}
}
@media screen and (max-width:470px) {
#lead .lead-area h2 {
line-height: 1.8;
}
#lead .lead-area p {
height: 23em;
}
_:-ms-lang(x)::-ms-backdrop, #lead .lead-area p {
width: 8em;
}
#lead .lead-area p br {
display: none;
}
}
@media screen and (max-width:350px) {
#lead .lead-area h2 {
line-height: 1.6;
}
#lead .lead-area p {
line-height: 1.8;
}
}
/* menu */
#menu {
margin: 5% 10% 0;
}
#menu section {
background: #fff;
margin: 0 0 10px 0;
}
#menu section h3 {
font-size: 0.9rem;
margin: 0 0 10px 0;
}
#menu section p {
font-size: 0.8rem;
}
#menu .menu-area {
padding: 20px;
box-shadow: 5px 0 10px #ccc;
}
#menu .menu-btn {
text-align: center;
margin: 50px 0 0 0;
}
/* contact */
#contact {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
}
#contact .contact-img {
width: 70%;
min-height: 300px;
background: url("../img/contact.jpg") no-repeat center;
background-size: cover;
}
#contact .contact-area {
width: 25%;
text-align: center;
}
@media screen and (max-width:1190px) {
#contact .contact-img {
width: 60%;
}
#contact .contact-area {
width: 35%;
}
}
@media screen and (max-width:768px) {
#contact .contact-img {
width: 48%;
}
#contact .contact-area {
width: 48%;
}
}
@media screen and (max-width:600px) {
#contact .contact-img, #contact .contact-area {
width: 100%;
}
#contact .contact-img {
margin: 0 0 50px 0;
}
}
#contact .contact-area h2 {
font-size: 1.3rem;
margin: 0 0 10px 0;
}
#contact .contact-area dt {
font-size: 1.2rem;
margin: 0 0 10px 0;
}
#contact .contact-area dd {
font-size: 0.8rem;
margin: 0 0 30px 0;
}
/* blog */
/*#blog{
margin:0 0 50px 0;
}
.blog-area{
display: flex;
justify-content: space-between;
text-align: center;
flex-wrap: wrap;
overflow: hidden;
}*/
.blog-area article:nth-of-type(1) {
width: 30%;
}
.blog-area .blog-block {
width: 68%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.blog-area .blog-block article {
margin: 0 0 3vh 0;
}
.blog-area .blog-block article:nth-of-type(1) {
width: 42%;
animation-delay: 0.5s;
}
.blog-area .blog-block article:nth-of-type(2) {
width: 20%;
animation-delay: 1.5s;
}
.blog-area .blog-block article:nth-of-type(3) {
width: 32%;
animation-delay: 1s;
}
.blog-area .blog-block article:nth-of-type(4) {
width: 32%;
animation-delay: .8s;
}
.blog-area .blog-block article:nth-of-type(5) {
width: 20%;
animation-delay: 1.8s;
}
.blog-area .blog-block article:nth-of-type(6) {
width: 42%;
animation-delay: 1.5s;
}
@media screen and (max-width:1300px) {
.blog-area .blog-block article:nth-of-type(n+1) {
width: 48%;
}
}
@media screen and (max-width:820px) {
.blog-area article:nth-of-type(1) {
width: 50%;
margin: 0 auto 3vh auto;
}
.blog-area .blog-block article:nth-of-type(1) {
margin: 0 0 3vh 0;
}
.blog-area .blog-block {
width: 100%;
}
}
@media screen and (max-width:768px) {
.blog-area .blog-block article:nth-of-type(n+1) {
animation-delay: .5s;
}
.blog-area article:nth-of-type(1) {
width: 100%;
}
}
@media screen and (max-width:450px) {
.blog-area .blog-block article:nth-of-type(n+1) {
width: 100%;
animation-delay: 0s !important;
}
}
.blog-area h3 {
font-size: 1rem;
margin: 0 0 20px 0;
}
@media screen and (max-width:450px) {
.blog-area h3 {
font-size: 0.9rem;
}
.blog-area p {
display: none;
}
}
.blog-area time {
font-size: 0.8rem;
}
.blog-area img {
width: auto;
height: 32vh;
}
.blog-area article:nth-of-type(1) img {
height: 67vh;
}
.blog-area .blog-block article:nth-of-type(1) img {
height: 32vh;
}
@media screen and (max-width:820px) {
.blog-area article:nth-of-type(1) img {
width: 100%;
height: auto;
}
.blog-area .blog-block article:nth-of-type(1) img {
width: auto;
height: 32vh;
}
}
@media screen and (max-width:450px) {
.blog-area img, .blog-area .blog-block article:nth-of-type(1) img {
width: 100%;
height: auto;
}
}
.blog-area figure time {
position: absolute;
bottom: 0;
left: 0;
background: rgba(226, 162, 178, 0.8);
display: block;
width: 100%;
padding: 10px;
color: #fff;
}
.blog-area p {
margin: 0 0 20px 0;
text-align: left;
font-size: 0.9rem;
}
.blog-area span {
border: 1px solid rgba(255, 255, 255, 0.7);
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 0.8rem;
white-space: nowrap;
}
/* footer */
/*#footer{
border-top: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}

#footer dl{
width:30%;   
}

#footer dl dt{
font-size: 0.8rem;
}

#footer dl dd{
font-size: 2rem;
}

@media screen and (max-width:900px) {
#footer dl{
margin: 50px 0;
}
}

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

#footer dl dd{
font-size: 1.5rem;
}

}

#footer .footer-list{
width:65%; 
text-align: right;
}

#footer ul li{
display: inline-block;
padding: 0 10px;
font-size: 0.8rem;
line-height: 3;
}

#footer small{
text-align: right;
margin: 20px 0 0 0;
display: block;
width: 100%;
font-size: 0.7rem;
}

#footer #page-top span{
/* display: inline-block;
width: 13px;
height: 13px;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
transform: rotate(45deg);
}*/
@media screen and (max-width:900px) {
#footer dl, #footer .footer-list, #footer small {
width: 100%;
text-align: center;
}
}
/*========= 上部固定させるためのCSS ===============*/
.header-inner {
height: 50px; /*高さ指定*/
width: 100%; /*横幅指定*/
/*以下はレイアウトのためのCSS*/
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
text-align: center;
padding: 20px;
}
/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed {
position: fixed; /*fixedを設定して固定*/
z-index: 999; /*最前面へ*/
top: 0; /*位置指定*/
left: 0; /*位置指定*/
}
.bg-white #header-inner {
height: 54px;
background: #fff;
}
#header.bg-white #header-logo {
padding-top: 18px;
}
#header.bg-white #header-logo a {
width: 157px;
height: 19px;
background-image: url("../img/logo.png");
}
.header-inner img {
width: 6em;
margin: 0 auto;
}
.header-inner {
position: fixed;
top: 0;
}
.content {
display: flex;
align-items: flex-start;
margin: 4% 10%;
}
#menu h1 {
display: block;
font-size: 2em;
font-weight: normal;
line-height: 1.3;
letter-spacing: 0;
font-family: 'Noto Serif JP';
}
@media screen and (max-width:768px) {
#menu h1 {
font-size: 20px;
padding-top: 3%;
}
}
.menuimg img {
width: 600px;
height: auto;
}
.accent {
font-weight: bolder;
}
.menu_box { height: 500px; }
.menu1 {
display: flex;
padding-bottom: 10%;
}
.menu1-p {
font-size: 1.3vw;
flex: 1.75 0 0;
padding-left: 8%;
}
.menu2 {
display: flex;
}
.header-area-2 {
margin: 0 5%;
/*padding: 4% 0;*/
}
.menu2-p {
padding-top: 4%;
text-align: justify;
}
.count, .count2, .count3, .count4, .count5, .count6 {
position: absolute;
top: -20%;
padding: 3px;
left: 1%;
font-size: 10em;
font-family: serif;
font-weight: 300;
color: #555;
background-image: linear-gradient(70deg, rgb(0, 0, 0, 0.4) 45%, #fff 50%, rgb(0, 0, 0, 0.4) 55%);
background-size: 500% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 3s infinite;
}
@keyframes shine {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.count2 {
position: relative;
font-size: 10em;
font-family: serif;
font-weight: 300;
top: -78%;
left: 3%;
}
.count3 {
position: relative;
font-size: 10em;
font-family: serif;
font-weight: 300;
top: -78%;
left: 68%
}
.count4 {
position: relative;
font-size: 10em;
font-family: serif;
font-weight: 300;
top: -78%;
left: 3%;
}
.count5 {
position: relative;
font-size: 10em;
font-family: serif;
font-weight: 300;
top: -78%;
left: 68%
}
.count6 {
position: relative;
font-size: 10em;
font-family: serif;
font-weight: 300;
top: -78%;
left: 3%;
}
@media screen and (max-width:768px) {
.count {
top: -35%;
font-size: 5em;
left: 4%;
}
.count2 {
top: 0%;
font-size: 5em;
left: 4%;
position: absolute;
}
.count3 {
top: 0%;
font-size: 5em;
left: 4%;
position: absolute;
}
.count4 {
top: 0%;
left: 4%;
font-size: 5em;
position: absolute;
}
.count5 {
top: 0%;
left: 4%;
font-size: 5em;
position: absolute;
}
.count6 {
top: 0%;
left: 4%;
font-size: 5em;
position: absolute;
}
.menu1-p {
padding: 20px 0 0 0;
font-size: 14px;
}
.header-area-2 {
padding: 4% 2%;
margin: 0;
order: 1;
}
.menu2 {
padding: 20% 0 0 0;
}
#container {
padding: 0 5%;
margin: 10% 0 0;
}
.content {
margin: 10px;
display: block;
}
.header-area h1 {
font-size: 2rem;
}
.header-area h2 {
font-size: 16px;
}
.header-area-p {
font-size: 14px;
margin-top: 20px;
}
.menu_box { height: auto; }
.menu1 {
display: flex;
padding-bottom: 2%;
}
.menu2 {
flex-direction: column;
position: relative;
}
}
.menuimg img {
width: 600px;
height: auto;
}
.br-sp {
display: none;
}
@media screen and (max-width:768px) {
.menuimg img {
width: 100%;
height: auto;
}
.br-sp {
display: block;
}
.header-inner {
position: static;
}
#menu {
margin: 18% 0 0 0;
}
}
.wrapper {
margin: 0 10% 5% 10%;
background-color: #fff;
background-color: #fff;
padding: 2% 0;
}
#profile .profile-content {
padding: 1% 5% 0;
}
@media screen and (max-width:768px) {
#profile .profile-content {
flex: 1.75 0 0;
}
}
#profile .profile-title {
display: block;
font-size: 2em;
font-weight: normal;
line-height: 1.3;
letter-spacing: 0;
font-family: 'Noto Serif JP';
padding: 1% 5% 0;
}
#profile .profile-content p {
font-size: 14px;
margin-top: 10px;
text-align: justify;
text-justify: inter-ideograph;
-ms-text-justify: inter-ideograph;
}
#profile .profile-content h3 {
display: block;
font-size: 1.5em;
font-weight: normal;
line-height: 1.3;
letter-spacing: 0;
font-family: 'Noto Serif JP';
}
@media screen and (max-width:768px) {
#profile .profile-title {
margin: 0;
}
}
@media screen and (max-width:768px) {
.wrapper {
display: block;
margin: 10% 0 18% 0;
padding: 4%;
}
.header-area {
color: #996600;
}
.pcnomi {
display: none;
}
}
.box_fv {
position: absolute;
z-index: -1;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;
min-height: 100%;
min-width: 100vh;
}
.box_fv video {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.box_fv2 {
/*position: absolute;*/
/*z-index: -1;*/
/*top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;*/
min-height: 80%;
min-width: 80%;
}
#video2 {
/*position: absolute;*/
/*top: 0;
left: 0;*/
width: 100% !important;
height: 100% !important;
}
@media screen and (max-width:768px) {
.box_fv {
max-width: 100%;
max-height: 100vh;
}
.box_fv2 {
width: 100%;
top: 36%;
}
}