@charset "utf-8";
html {
background-color: transparent
}
body {
font-family: "Zen Kaku Gothic New", "Josefin Sans", sans-serif;
text-align: left;
}
img {
max-width: 100%;
height: auto;
}
.fp-section {
will-change: transform;
transform: translate3d(0, 0, 0);
}
#header {
position: fixed;
height: 50px;
display: block;
width: 100%;
z-index: 9;
color: #f2f2f2;
padding: 0 0 0 0;
background: none;
}
#header {
top: 0px;
}
#footer {
padding-top: 4rem;
}
.footer__copyright,
.footer__linkList a,
.footer__snsList a{
color: #3f7282;
}
.footer__snsList a {
font-size:1.6rem;
}
/* slide navigation */
.fp-controlArrow.fp-prev,
.fp-controlArrow.fp-next {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
border: 2px solid #fff;
color: #fff;
}
.fp-controlArrow.fp-prev::before {
content: "\f060";
font-family: "Font Awesome 5 Free";
font-weight: 600;
position: absolute;
top: calc(50% - .5rem);
font-size: .8rem;
right: 0;
}
.fp-controlArrow.fp-next::before {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 600;
position: absolute;
top: calc(50% - .5rem);
font-size: .8rem;
left: 0;
}
/* bullet navi */
#fp-nav {
top: 120px;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: #fff;
}
.columnsWrap {
display: flex;
}
.col--second .main-section {
width: 80%;
margin: 0 auto;
}
/* 2画面分割 */
#slide9-1 .column,
#slide8-1 .column,
#slide7-1 .column,
#slide6-1 .column,
#slide5-1 .column,
#slide4-1 .column,
#slide3-1 .column,
#slide1-1 .column {
height: 100vh;
width: 100%;
display: grid;
align-items: center;
justify-content: center;
}
/* 上下中央に配置 */
#slide10-1 .main-section,
#slide2-1 .main-section,
#slide3-1 .column .col--second,
#slide4-1 .column .col--second,
#slide5-1 .column .col--second,
#slide6-1 .column .col--second,
#slide7-1 .column .col--second,
#slide8-1 .column .col--second,
#slide9-1 .column .col--second {
display: grid;
place-content: center;
}
/* 背景調整 */
#section1 .col--second {
background: #0b3c4c;
}
#section3 .col--second {
background: #ab0000;
}
#section4 .col--second {
background: #c00434;
}
#section5 .col--second {
background: #035847;
}
#section6 .col--second {
background: #017134;
}
#section7 .col--second {
background: #859d1b;
}
#section8 .col--second {
background: #a66e06;
}
#section9 .col--second {
background: #a64606;
}
#slide3-1 .col--first {
background: url(../img/pict_main_01.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#slide4-1 .col--first {
background: url(../img/pict_main_02.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#slide5-1 .col--first {
background: url(../img/pict_main_03.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#slide6-1 .col--first {
background: url(../img/pict_main_04.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#slide7-1 .col--first {
background: url(../img/pict_main_05.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#slide8-1 .col--first {
background: url(../img/pict_main_06.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#slide9-1 .col--first {
background: url(../img/pict_main_07.jpg) no-repeat bottom left;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#section3-2 {
background: #770000;
}
#section4-2 {
background: #860324;
}
#section5-2 {
background: #023d31;
}
#section6-2 {
background: #014f24;
}
#section7-2 {
background: #5d6e13;
}
#section8-2 {
background: #744d04;
}
#section9-2 {
background: #632902;
}
/* 個別ページ */
.contents {
width: 80%;
margin: 90px auto 90px;
}
.contents h2 {
text-align: center;
font-family: "Josefin Sans", sans-serif;
font-size: 1.4rem;
margin-bottom: 2.4rem;
color: #fff;
}
/* main -- section1 */
#section1 .col--first {
background: url(../img/sample3.png) no-repeat bottom right;
background-size: cover;
color: rgba(255, 255, 255, .7);
}
#section1 .introduction {
width: 40%;
margin: 0 auto;
}
#section1 .introduction h1 {
margin-bottom: 4rem;
}
#section1 .introduction p {
text-align: left;
color: #fff;
font-size: 1rem;
line-height: 2;
}
/* intro -- section2 */
/* intro -- section2 */
/* intro -- section2 */
#section2 {
background: #400106;
}
#slide2-1 .main-section {
width: 64%;
margin: 0 auto;
}
#slide2-1 .main-section p {
color: #fff;
line-height: 1.8;
font-size: 1rem;
text-align: center;
}
#slide2-1 .staffList {
margin: 2.4rem 0 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 2.4rem;
grid-row-gap: 2.4rem;
}
#slide2-1 .staff {
line-height: 1.2;
}
#slide2-1 .staffPict {
width: 80%;
margin: 0 auto;
}
#slide2-1 .staffPict img {
border-radius: 50%;
}
#slide2-1 .staffName:before {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 600;
padding-right: .2rem;
font-size: .6rem;
}
#slide2-1 .staffName {
margin-top: .4rem;
font-size: .9rem;
font-family: "Josefin Sans", sans-serif;
color: #fff;
text-align: center;
}
/* masayan -- section3 */
/* masayan -- section3 */
/* masayan -- section3 */
.items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 1.6rem;
}
.items .item .pict {
text-align: center;
margin-bottom: .4rem;
}
/*
.items .item .pict img {
width: %;
margin: 0 auto;
}*/
.item .credit {
color: #fff;
padding: 1rem;
}
.item .credit .brandName {
margin-bottom: .2rem;
font-family: "Josefin Sans", sans-serif;
font-size: .9rem;
font-weight: 600;
}
.item .credit {
padding: 0;
}
.item .credit .checkBtn {
font-size: .6rem;
border: 1px solid #fff;
padding: .2rem;
display: inline-block;
}
/* 本文 */
.main-section__head {
margin-bottom: 1.6rem;
}
.main-section__body {
margin-bottom: 1.6rem;
}
.main-section__body h2 {
font-size: 1.6rem;
color: #fff;
font-weight: 600;
margin-bottom: 1.6rem;
}
.main-section__body p {
color: #fff;
font-size: .9rem;
line-height: 1.8;
}
.selectItem {
margin: 1.6rem 0 2.4rem;
}
.selectItem a {
color: #fff;
font-family: "Josefin Sans", sans-serif;
}
.selectItem__body {
border-left: 2px solid #fff;
padding: .8rem 0 .8rem .8rem;
line-height: 1.6;
}
.selectItem__body .brandName {
font-size: 1rem;
}
.selectItem__body .itemName {
font-size: .7rem;
}
/* 関連アイテムボタン */
.btnArea {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 3.2rem 0;
}
.btn {
align-self: center;
justify-self: end;
}
.btn.back {
align-self: center;
justify-self: start;
}
.btn span {
border: 2px solid #fff;
border-radius: 2rem;
display: inline-block;
padding: .6rem 1rem;
color: #fff;
}
.btn.go span:after {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 600;
padding-left: .4rem;
}
.btn.back span:before {
content: "\f060";
font-family: "Font Awesome 5 Free";
font-weight: 600;
padding-right: .4rem;
}
.btnArea .btn.go {
order: 2;
}
.btnArea .btn.back {
order: 1;
}
.staffCard {
display: grid;
align-items: center;
grid-template-columns: 2.4rem 2.4rem auto;
column-gap: .8rem;
}
.staffCard dd:nth-child(2) {
order: 1;
}
.staffCard dd:nth-child(1) {
order: 2;
}
.staffCard dt {
font-family: "Josefin Sans", sans-serif;
font-size: 1.4rem;
line-height: 1;
order: 3;
color: #fff;
font-weight: 600;
}
.staffCard dt span {
display: inline-block;
padding-right: .4rem;
font-size: .8rem;
}
.staffCard dd img {
border-radius: 50%;
}
.staffCard dd .staffNum {
font-family: "Josefin Sans", sans-serif;
text-align: center;
align-self: center;
font-weight: bold;
color: #fff;
font-size: 1rem;
display: block;
line-height: 2.4;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/* ending */
#section10 {
padding-top:120px;
background: #0b3c4c;
color:#fff;
}
#slide10-1 .main-section {
text-align: center;
width: 50%;
max-width:600px;
margin: 0 auto;
}
#slide10-1 .main-section h2 {
font-size: 1rem;
margin-bottom: .8rem;
text-align: center;
}
#slide10-1 .main-section img {
border-radius: 1rem;
width:80%;
margin:0 auto ;
}
@media (min-width: 767.98px) and (max-width: 1023px) {}
@media (max-width: 767.98px) {
.columnsWrap {
display: block;
}
.btnArea {
display: block;
}
.btnArea .btn {
align-self: center;
justify-self: center;
margin: 1rem 0;
}
.contents h2 {
font-size: 1.2rem;
text-align: center;
color: #fff;
margin-bottom: 1.6rem;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
/* 下部のすきま */
#slide10-1 .main-section,
#slide9-1 .columnsWrap .col--second,
#slide8-1 .columnsWrap .col--second,
#slide7-1 .columnsWrap .col--second,
#slide6-1 .columnsWrap .col--second,
#slide5-1 .columnsWrap .col--second,
#slide4-1 .columnsWrap .col--second,
#slide3-1 .columnsWrap .col--second,
#slide2-1 {
padding-bottom: 8rem;
}
/* sp slide1 */
/* sp slide1 */
/* sp slide1 */
#section1 .introduction {
width: 72%;
margin: 0 auto;
}
#section1 .introduction h1 {
width: 72%;
margin: 0 auto 2.4rem;
}
#slide1-1 .columnsWrap {
position: relative;
}
#slide1-1 .columnsWrap .col--second {
background: none;
position: absolute;
left: 0;
top: 0;
align-items: center;
}
/* sp slide2 */
/* sp slide2 */
/* sp slide2 */
#slide2-1 .main-section {
display: grid;
place-content: center;
width: 80%;
margin: 0 auto;
}
#slide2-1 .main-section p {
text-align: left;
}
#slide2-1 .staffList {
margin: 2.4rem 0 0 0;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1.6rem;
}
#slide2-1 .staffName:before {
font-size: .8rem;
}
/* sp slide3 */
/* sp slide3 */
/* sp slide3 */
.main-section__head {
display: block;
}
.moveSlide.right {
justify-self: left;
}
.moveSlide {
margin-top: .8rem;
border: 1px solid #fff;
padding: .3rem .8rem;
border-radius: 2rem;
cursor: pointer;
}
#slide3-1 .column,
#slide4-1 .column,
#slide5-1 .column,
#slide6-1 .column,
#slide7-1 .column,
#slide8-1 .column,
#slide9-1 .column {
display: block;
height: inherit;
width: inherit;
}
#slide3-1 .columnsWrap .col--first,
#slide4-1 .columnsWrap .col--first,
#slide5-1 .columnsWrap .col--first,
#slide6-1 .columnsWrap .col--first,
#slide7-1 .columnsWrap .col--first,
#slide8-1 .columnsWrap .col--first,
#slide9-1 .columnsWrap .col--first {
height: 54vh;
display: block;
}
#slide3-1 .columnsWrap .col--second,
#slide4-1 .columnsWrap .col--second,
#slide5-1 .columnsWrap .col--second,
#slide6-1 .columnsWrap .col--second,
#slide7-1 .columnsWrap .col--second,
#slide8-1 .columnsWrap .col--second,
#slide9-1 .columnsWrap .col--second {
padding-top: 2.4rem;
place-content: unset;
}
.itemSlide .columnWrap {
width: 72%;
margin: 0 auto 4rem;
}
.items {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
#section10 {
padding-top:unset;
}
#slide10-1 .main-section {
width: 64%;
max-width:600px;
}
#slide10-1 .main-section img {
width:100%;
}
}