@charset "UTF-8";
/* CSS Document */
header {
width: 100%;
margin: 0 auto;
display: flex;
align-items:flex-start;
padding: 0 0 .4rem 1rem;
justify-content: flex-end;
position: relative;
}
#logo {
margin: .5rem;
position: absolute;
left: 10px;
}
#logo, header ul,#logo, header ul li:first-of-type dl {
display: flex;
align-items: center;
}
header ul {
align-items: stretch;
}
header ul li {
align-self:stretch;
display: flex;
align-items: center;
font-size: .9rem;
}
header ul li a {
display: block;
text-align: center;
transition: .3s all;
line-height: 130%;
}
header ul li a img {
width: 20px;
height: 20px;
}
header dt,
header dd {
min-width: 150px;
padding: .5rem .2rem;
text-align: center;
}
header dt {
color: #fff;
background: #EFDC8A;
}
header dd {
border-right:1px #EFDC8A solid;
font-weight: 700;
}
header ul li img {
margin: 0 0 0 1rem;
}
header li:nth-of-type(4) {
margin-left: 1rem;
}
header li:nth-of-type(4) a,
header li:nth-of-type(5) a{
background:#8BC1EA;
height: 100%;
padding: 0 1rem;
display: flex;
align-items: center;
color: #fff;
min-width: 120px;
justify-content: center;
}
header li:nth-of-type(5) a{
background:#9CD8D8;
}
.pcNon {
display: none;
}

@media screen and (min-width: 1240px) {
a {
transition: .3s all;
}
a:hover {
opacity: .5;
}
}

@media screen and (max-width: 1024px) {
#logo {
margin: .5rem;
position: absolute;
top: -15px;
left: 10px;
}
header > ul {
margin-right: 3.5rem;
}
header dt,
header dd,
header li:nth-of-type(4) a, header li:nth-of-type(5) a{
min-width: 80px;
}
.pcNon {
display: block;
}
}

@media screen and (max-width: 812px) {
header {
display: block;
text-align: center;
padding: 0;
}
header > ul {
margin-right: 0;
}
header ul li:first-of-type dl {
width: 100%;
}
header > ul > li:first-of-type {
width: 57%;
}
header li:nth-of-type(4),
header li:nth-of-type(5) {
width: 20%;
}
header li:nth-of-type(4) a,
header li:nth-of-type(5) a  {
width: 100%;
}
header dt,
header dd {
width: calc(100% / 4);
}
#logo {
position: relative;
margin: 0rem auto .5rem;
text-align: center;
top: auto;
left: auto;
display: block;
max-width: 200px;
}
#logo h1 {
text-align: center;
}
}

@media screen and (max-width: 480px) {
#logo {
margin: .5rem auto;
}
header > ul {
flex-wrap:wrap;
justify-content: center;
}
header > ul > li:first-of-type {
display: none;
}
header > ul > li:first-of-type dt,
header > ul > li:first-of-type dd {
width: calc(100%/4);
max-width: none;
}
header > ul > li:nth-child(n+2) {
width:  12.5%;
}
header > ul > li:nth-child(n+4) {
width: 35% !important;
}
header > ul > li:nth-child(n+4) a {
padding: .5rem 0;
}
}

/* =======================================
navigation
======================================= */
.drawer-nav {
z-index: 1040 !important;
transition: .3s;
}
#scrollNav {
position: fixed;
bottom: 150px;
right: 0;
width: 100px;
z-index: 10;
}
#scrollNav a {
display: block;
background: #8BC1EA;
padding: 1rem;
font-size: .9rem;
margin-top: .5rem;
text-align: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 0 5px #ddd;
}
#scrollNav a:last-of-type {
background:#EAD24E;
}
#scrollNav figcaption {
color: #fff;
}
#scrollNav a img {
width: 30px;
height:30px;
object-fit: contain;
margin: 0 auto;
}

@media screen and (min-width: 1281px) {
.drawer-nav {
width: 90%;
height: auto !important;
z-index: 999;
margin: 0 0 0 auto;
}
.drawer-hamburger {
display: none;
}
.drawer-nav ul {
display: flex;
justify-content:flex-end;
}
.drawer-nav ul li {
list-style: none;
position: relative;
font-size: .9rem;
}
nav > ul > li .child a:hover {
background:#9cd8d8;
}
.drawer-nav ul li a,
.drawer-nav ul li > span {
display: block;
width: 100%;
padding: .3rem .5rem;
position: relative;
text-align: center;
}
.drawer-nav ul li img {
width: auto;
max-height: 20px;
margin-right: .3rem;
}
}

@media screen and (min-width: 1281px) {
a {
transition: .3s all;
}
.pcNon {
display: none !important;
}
/*ナビゲーション動き*/
nav > ul > li .child,
#shootingPlan .child {
min-width: 200px;
width: 120%;
display: block;
height: 100%;
position: absolute;
z-index: 99;
}
#shootingPlan .child {
top:calc(100% + 10px); 
}
nav > ul > li .child li,
#shootingPlan .child li {
opacity: 0;
display: block;
visibility: hidden;
transform: rotateY(180deg);
transition: .5s all;
background: #8BC1EA;
}
nav > ul > li .child li a,
#shootingPlan .child li a {
color: #fff !important;
border-bottom: 1px solid #C7D3FF;
padding: 1rem;
font-size: .9rem;
}
ul > li .child li:nth-child(2),
#shootingPlan .child li:nth-child(2){
transition-delay: .1s;
}
ul > li .child li:nth-child(3),
#shootingPlan .child li:nth-child(3 ){
transition-delay: .2s;
}
ul > li .child li:nth-child(4),
#shootingPlan .child li:nth-child(4){
transition-delay: .3s;
}
ul > li .child li:nth-child(5),
#shootingPlan .child li:nth-child(5) {
transition-delay: .4s;
}
ul > li .child li:nth-child(6),
#shootingPlan .child li:nth-child(6){
transition-delay: .5s;
}
ul > li .child li:nth-child(6) {
transition-delay: .7s;
}
ul > li.view .child li,
#shootingPlan .view li {
opacity: 1;
visibility: visible;
transform: rotateY(0deg);
}
ul > li .child a {
padding: .5rem 1rem;
text-align: left;
display: block;
}
.drawer-nav h2 {
display: none;
}
}

@media screen and (max-width: 1280px) {
nav {
background-color: #84e3ff!important;
overflow-y: scroll !important;
height: 105vh;
}
nav > ul > li > span,
nav > ul > li > a {
display: block;
padding: 0 .5rem;
font-weight: 700;
position: relative;
color: #fff !important;
}
nav > ul > li {
position: relative;
}
nav > ul > li:last-of-type {
width: 94%;
border-radius: 50px;
background: #FFF;
line-height: 350%;
margin-top: 2rem;
}
nav > ul > li:last-of-type a {
color: #22447A !important;
}
nav > ul > li:after {
content: ">";
position: absolute;
display: block;
top: 0px;
right: 20px;
color:#3671B2;
font-weight: 700;
}
nav > ul > li.parents:after {
content: "+";
}
nav > ul > li.parents > a {
pointer-events: none;
border: 1px solid #7b7b7b;
display: block;
padding: .5rem;
text-align: center;
margin-top: .1rem;
color: #fff !important;
}
nav > ul > li img {
width: 20px;
margin-right: 1rem;
}
nav .child {
display: none;
margin-bottom: 1rem;
}
nav .child li {
border-bottom: none;
}
nav .child li a {
padding: 1rem .7rem;
line-height: 100%;
color: #fff !important;
display: block;
font-size: 85%;
margin-bottom: 1px;
background: #7dcebf;
}
.drawer-menu {
padding: 1rem 0 !important;
}
.drawer-nav h2 {
position: relative;
background: #fff;
padding: 1.5rem;

}
.is-fixed.drawer-nav h2 {
position: relative;
}
.drawer-nav li {
width: 100%;
line-height: 450%;
border-bottom: 1px solid #fff;
padding: 0 .8rem;
}
.drawer-menu {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
#shootingPlan .child {
display: none;
}
}

@media screen and (max-width: 1024px) {
#scrollNav {
width: 100%;
display: flex;
bottom: 0;
left: 0;
z-index: 7;
}
#scrollNav a {
width: 50%;
border-radius:0;
}
#scrollNav a img {
margin: 0 5px;
}
#scrollNav a figure {
display: flex;
justify-content: center;
}
}

/* =======================================
撮影メニュー #shootingPlan
======================================= */
#shootingPlan {
width: 96%;
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1rem;
align-items: center;
transition: .2s all;
position: relative;
}
#shootingPlan h2,
#shootingPlan ul {
font-size: 1.2rem;
margin: 0 1%;
text-align: center;
}
#shootingPlan h2 {
width: calc(15% - 2%);
color: #9CD8D8;
font-size: 1rem;
font-weight: 700;
}
#shootingPlan ul {
width: 83%;
display: flex;
justify-content: center;
flex-wrap:wrap;
}
#shootingPlan ul li {
width: calc(100% / 5 - 2%);
font-size: 1.1rem;
text-align: center;
position: relative;
align-self: center;
}
#shootingPlan ul.child li {
width: 120%;
}
.scrollNav.is-fixed {
position: fixed;
top: 0;
left: auto;
width: 100%;
padding: 0 1rem;
text-align: center;
z-index: 10;
background: #fff;
}
.scrollNav.is-fixed #shootingPlan ul {
border-bottom:none;
}
.scrollNav.is-fixed #shootingPlan {
background: rgba(255,255,255,.7);
}
.scrollNav.is-fixed #shootingPlan h2,
.scrollNav.is-fixed #shootingPlan p {
font-size: .9rem;
}
#shootingPlan::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
margin: auto;
background-image: linear-gradient(to right, #000, #000 7px, transparent 7px, transparent 10px);
background-size: 14px 1px;
background-repeat: repeat-x;
}
#bridal #shootingPlan > div {
width: 100%;
max-width: 1280px;
margin: 0 auto 3rem;;
display: flex;
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 8%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 91%,rgba(255,255,255,1) 92%,rgba(255,255,255,0) 100%);
padding: 1rem 2rem;
position: relative;
align-items: center;
z-index: 2;
flex-wrap:wrap;
}
#bridal #photoGallery p {
position: relative;
z-index: 2;
}

@media screen and (min-width: 813px) {
#shootingPlan {
position: relative;
}
}

@media screen and (max-width: 1240px) {
#shootingPlan h2 {
width: 12%;
}
#shootingPlan ul li {
width: auto;
margin:  0 1%;
}
}

@media screen and (max-width: 812px) {
#shootingPlan h2,
#shootingPlan ul {
width: 100%;
}
#shootingPlan ul li {
width: auto;
margin:  0 1%;
}
#shootingPlan ul li a {
font-size: .9rem;
}
.scrollNav.is-fixed {
position: relative;
}

#bridal #shootingPlan h2 {
margin: 0 auto 1rem;
}
}


/* =======================================
mainVisual
======================================= */
#sub #mainVisual {
position: relative;
width: 100%;
margin: 0 auto;
}

#sub #mainVisual img {
object-fit: cover;
height: 938px;
width: 100%;
}
@media screen and (max-width: 1366px) {
#sub #mainVisual img, nav + section {
height: 880px;
}
}
@media screen and (max-width: 1024px) {
#sub #mainVisual img{
height: 500px;
}
}
@media screen and (max-width: 812px){
#sub #mainVisual img {
height: 370px;
}
}
@media screen and (max-width: 480px){ 
#sub #mainVisual img {
height:450px;
}
}

/* =======================================
main
======================================= */
main {
position: relative;
}
main > section {
position: relative;
}
@media screen and (max-width: 480px) {
main > section {
margin-top: 5rem;
}
}

/* =======================================
link
======================================= */
a.commLink, a.commLink2 {
display: block;
max-width: 300px;
padding: .8rem 1rem;
color: #fff;
background: #9CD8D8;
font-size: .9rem;
position: relative;
margin: 1rem auto 0;
transition: .3s all;
text-align: center;
border-radius:30px;
}

a.commLink:hover,
a.commLink2:hover {
background:#275696;
}

a.commLink:after, a.commLink2:after {
content:'\f054';
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size: 1rem;
color: #fff;
padding-left: 1.5rem;
transition: .3s all;
}
a.commLink:hover::after, a.commLink2:hover::after {
padding-left: 1rem;
}
.commLink3 a {
margin: 2rem auto 0;
text-align: center;
background: url("../img/common/arrow-simple.svg") no-repeat bottom center;
min-width: 150px;
display: block;
}

.commLink4 a {
display: block;
max-width: 300px;
padding: .8rem 1rem;
margin: 3rem auto 0;
text-align: center;
border: 1px solid #D67D7D;
}

/* =======================================
title
======================================= */
main h2 {
font-size: 2rem;
color: #9CD8D8;
font-weight: 700;
max-width: 500px;
margin: 0 auto;
text-align: center;
position: relative;
width: 94%;
line-height: 120%;
}

main h2 span {
display: block;
font-size: 1rem;
color: #E0CC5D;
margin-top: 1vh;
font-family: 'TsukuBRdGothic-Regular','Chalkboard SE',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro",sans-serif;
}

main h2:not(.txtTtl):after {
content: "";
background: url("../img/common/h3_line.svg") no-repeat center;
background-size: contain;
display: block;
width: 80px;
position: absolute;
top: 0px;
right: 0;
height: 52px;
}

#bridal main h2:after {
display: none;
}

h2.txtTtl {
background: none;
font-weight: 400;
font-size: 2.7rem;
}

.ttlStyle {
text-align: center;
}

.ttlStyle h3 {
font-size: 1.3rem;
display: inline-block;
text-align: center;
margin: 1rem auto 0;
background-image: url("../img/common/line01.svg"),url("../img/common/line02.svg");
background-repeat:no-repeat;
background-position: left bottom,right bottom;
padding: 0 3rem 1rem;
letter-spacing: .2rem;
}
.ttlStyle.purple h3{
background-image: url("../img/common/line01-p.svg"),url("../img/common/line02-p.svg");
}
.ttlStyle.gold h3{
background-image: url("../img/common/line01-g.svg"),url("../img/common/line02-g.svg");
}
.ttlStyle.lightGreen h3 {
background-image: url("../img/common/line01-lg.svg"),url("../img/common/line02-lg.svg");
}

h3.simple,h4.simple {
color: #72DADE;
font-size: 1.2rem;
font-family: 'TsukuBRdGothic-Regular','Chalkboard SE',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro",sans-serif;
margin-bottom: 1rem;
}

h3.storeTtl {
background: url("../img/studio/kurume-rbn.svg") no-repeat center top;
color: #fff;
background-size: contain;
font-weight: 700;
font-size: 1.8rem;
padding: .5rem;
}

h3.storeTtl span {
position: relative;
display: block;
text-shadow: 1px 1px 2px rgb(0,0,0,0.35);
}
h3.storeTtl.hakata span {
text-shadow: 1px 1px 3px rgb(0,0,0,0.35), -1px -1px 3px rgb(0,0,0,0.35)
}

h3.storeTtl.yanagawa {
background: url("../img/studio/yanagawa-rbn.svg") no-repeat center top;
padding: .5rem;
}

h3.storeTtl.hakata {
background: url("../img/studio/hakata-rbn.svg") no-repeat center top;
padding: .5rem;
}

h4.simpleIcon {
font-size: 1.8rem;
text-align: center;
font-family: 'Gill Sans','Franklin Gothic Medium',sans-serif;
}

@media screen and (max-width: 480px) {
main h2:after {
content: "";
width: 60px;
position: absolute;
top: 0px;
right: 0;
height: 52px;
}
h3.storeTtl {
font-size: 1.3rem;
}
h2.txtTtl {
background: none;
font-weight: 400;
font-size: 2.3rem;
}

.ttlStyle h3 {
font-size: 1.3rem;
display: inline-block;
width: 90%;
text-align: center;
margin: 1rem auto 0;
background-image: url("../img/common/line01.svg"),url("../img/common/line02.svg");
background-repeat:no-repeat;
background-position: left bottom,right bottom;
padding: 0 1rem 1rem;
letter-spacing: .2rem;
}
}

/* --------------------------------------------------
sub page common
-------------------------------------------------- */
/* tab */
#tab {
width: 94%;
max-width: 1280px;
margin: 0 auto;
}
#tab ul {
display: flex;
justify-content: center;
margin-top: 4rem;
border-bottom:3px solid #7CA8E5;
}
#tab.purple ul {
border-bottom: 3px solid #D8B2F8;
}
#tab ul li {
border-radius: 15px;
min-width: 200px;
min-height: 90px;
padding: 1rem 1rem 0;
margin: 0 .5%;
text-align: center;
position: relative;
}
#tab ul li.parents:after {
content: "";
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 53%,rgba(255,255,255,1) 100%);
display: block;
width: calc(100% + 6px);
height: 60px;
position: absolute;
bottom:-3px;
left: -3px;
z-index: 0;
}
#tab ul li.parents:before {
content:"";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 17.3px 10px;
position: absolute;
bottom: -3px;
left: calc(50% - 10px);
border-color: transparent transparent #7CA8E5 transparent;
z-index: 1;
}
#tab.purple ul li.parents:before {
border-color: transparent transparent #D8B2F8 transparent;
}
#tab ul li a {
display: block;
width: 100%;
height: 100%;
font-size: 1.2rem;
letter-spacing: .2rem;
position: relative;
z-index: 5;
}
#tab ul li.parents {
border: 3px solid #7CA8E5;
}
#tab ul li.parents a{
color: #7CA8E5;
}
#tab.purple ul li.parents {
border: 3px solid #D8B2F8;
}
#tab.purple ul li.parents a{
color: #D8B2F8;
}

@media screen and (max-width: 480px){
#tab ul li {
min-width:0px;
}
}

/* =======================================
galleryDetail
======================================= */
#galleryDetail > div {
max-width:1280px;
width: 90%;
margin: 5rem auto;
padding: 4rem;
background: linear-gradient(135deg, rgba(255,227,243,1) 0%,rgba(181,220,255,1) 50%,rgba(204,207,253,1) 100%);
height: 100%;
}
#galleryDetail ul {
display: block;
}
#galleryDetail li {
width: calc(100% / 4);
padding: 10px;
}
.magnify {
background: #D09BE0;
color: #fff;
max-width: 400px;
width:90%;
margin: 0 auto 3rem;
padding: .5rem;
text-align: center;
border-radius: 30px;
}
.magnify:before {
content:'\f00e';
font-family:'Font Awesome 5 Free';
font-weight:900;
padding-right: 1rem;
}

@media screen and (max-width:812px) {
#galleryDetail > div {
width: 90%;
padding: 1rem;
}
#galleryDetail li {
width: calc(100% / 3);
padding: 5px;
}
}

.txtLink a {
    margin-top: 1.5rem;
    color: #8bc1ea;
    font-weight: bold;
    font-size: 120%;
}

header ul li:last-child{
  display: none;
}