@charset "UTF-8";

/* A Modern CSS Reset */ 
*,
*::before,
*::after{
  box-sizing:border-box
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd{
  margin:0
}
ul[role="list"],
ol[role="list"]{
  list-style:none
}
/*
html:focus-within{
  scroll-behavior:smooth
}
*/
body{
  min-height:100vh;
  text-rendering:optimizeSpeed;
}
a:not([class]){
  text-decoration-skip-ink:auto
}
img,
picture{
  max-width:100%;display:block
}
input,
button,
textarea,
select{
  font:inherit
}
@media(prefers-reduced-motion:reduce){
  html:focus-within{
    scroll-behavior:auto
  }
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}


/* --------------------------------------
-----------------------------------------
COMMON
-----------------------------------------
----------------------------------------- */ 

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 12px;
  line-height:1.3;
}

@media screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

a {
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  opacity: .8;
  transition: 0.3s;
}

/* --------------------------------------
FONT
----------------------------------------- */ 

.F_pop {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.F_w_400 {
  font-weight: 400;
}
.F_w_700 {
  font-weight: 700;
}
.F_w_900 {
  font-weight: 900;
}

.al_C {
  text-align: center;
}


/* --------------------------------------
.vsbl____
----------------------------------------- */ 
.vsbl_pc,
.vsbl_pc.flex,
.vsbl_pc.flex_C {
  display: none;
}

.vsbl_sp {
  display: block;
}

@media screen and (min-width: 960px) {
  .vsbl_pc {
    display: block;
  }
  .vsbl_sp{
    display: none;
  }
  .vsbl_pc.flex,
  .vsbl_pc.flex_C {
    display: flex;
  }
}

/* --------------------------------------
POSITION
----------------------------------------- */ 

.p_rltv {
  position: relative;
}
.p_abslt {
  position: absolute;
}

/* --------------------------------------
FLEX
----------------------------------------- */ 
.flex {
  display: flex;
}
.flex_C {
  display: flex;
  align-items: center;
}
.flex_sb {
  justify-content: space-between;
}
.flex_sa {
  justify-content: space-around;
}

@media screen and (min-width: 960px) {
  .flex_part {
    display: flex;
  }
}


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

header {
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  padding: 15px 20px;
}

header h1 {
  width: 160px;
}
header h1 img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 960px) {
  header {
    background: #fff;
    padding: 10px;
  }
  header > div {
    max-width: 1260px;
    margin: 0 auto;
  }
  header h1 {
    width: 160px;
  }
  header ul {
    font-size: 12px;
    margin: 0;
  }
  header li a {
    display: block;
    padding: 10px 40px;
  }
}

/* --------------------------------------
-----------------------------------------
main
-----------------------------------------
----------------------------------------- */

@media screen and (min-width: 960px) {
  main {
    padding-top: 60px;
  }
}

/* --------------------------------------
#KV
----------------------------------------- */ 
.kv_height {
  height: 540px;
}

#KV h2 {
  font-size: 40px;
  line-height: 1.2;
  width: 100%;
  background-image: url(images/kv_h2_bg.png);
  background-repeat: repeat-x;
  background-size: 100% auto;
  background-position: bottom center;
  left: 0;
  top: 0;
  padding: 80px 20px 20px;
}

@media screen and (min-width: 428px) {
  #KV h2 {
    background-size: 428px auto;
  }
}

@media screen and (min-width: 960px) {
  .kv_height {
    height: 780px;
  }
  #KV h2 {
    font-size: 80px;
    background-image: url(images/kv_h2_bg_pc.png);
    background-size: 1430px auto;
    background-position: bottom center;
    padding:0;
  }
  #KV h2 p {
    position: absolute;
    left: 50%;
    top: 120px;
    margin-left: -430px;
  }
}

/* #SLIDE
----------------------------------------- */ 

.slide div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  z-index: -1;
}

/*---------------- KVの画像の変更はこちら ----------------*/ 
/*--- スライド枚数を変える場合はindex.htmlも変更すること ---*/ 
.slide .slide_01 {
  background-image: url(images/slide_01.jpg);
}
.slide .slide_02 {
  background-image: url(images/slide_02.jpg);
}
.slide .slide_03 {
  background-image: url(images/slide_03.jpg);
}
.slide .slide_04 {
  background-image: url(images/slide_04.jpg);
}
.slide .slide_05 {
  background-image: url(images/slide_05.jpg);
}
.slide .slide_06 {
  background-image: url(images/slide_06.jpg);
}
.slide .slide_07 {
  background-image: url(images/slide_07.jpg);
}

/* --------------------------------------
#C_01
----------------------------------------- */ 
#C_01 {
  background-image: url(images/C_01_bg.png);
  background-repeat: repeat-x;
  background-size: 100% auto;
  background-position: top center;
}

#C_01 .content_01 .img {
  width: 100%;
}

#C_01 .content_02 .txt {
  width: 90%;
  max-width: 290px;
  margin: 0 auto;
  padding: 20px 0 180px;
}
#C_01 .content_02 .txt h2 {
  font-size: 20px;
}
#C_01 .content_02 .txt p {
  text-align:justify;
}
#C_01 .content_02 .txt p:first-of-type {
  margin: 20px 0;
}

#C_01 .content_02 .p_abslt {
  top: -190px;
  width: 100%;
}
#C_01 .content_02 .p_abslt h3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
}
#C_01 .content_02 .p_abslt p {
  width: 90%;
  max-width: 320px;
  margin: 0 auto;
}

#C_01 .ico.p_abslt {
  width: 165px;
  left: 20px;
  bottom: 0;
}

@media screen and (min-width: 428px) {
  #C_01 {
    background-size: 428px auto;
  }
  #C_01 .content_01 .img {
    width: 428px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 960px) {
  #C_01 {
    background-image: url(images/C_01_bg_pc.png);
    background-repeat: repeat-x;
    background-size: 1430px auto;
    background-position: top center;
  }
  #C_01 .content_01 {
    width: 780px;
    height: 650px;
    overflow: hidden;
    position: absolute;
    right: 50%;
    top: 0;
    margin-right: -66px;
  }
  #C_01 .content_01 .img {
    width: 780px;
    min-width: 780px;
    height: 650px;
  }

  #C_01 .content_02 {
    width: 45.4545%;
    margin-left: auto;
    padding: 50px 0;
  }
  #C_01 .content_02 .txt {
    width: 380px;
    max-width: 100%;
    margin: 0 auto 0 0;
    padding: 0px 0 60px 20px;
  }
  #C_01 .content_02 .txt h2 {
    font-size: 28px;
  }

  #C_01 .content_02 .p_abslt {
    position: relative;
    top: inherit;
    max-width: 510px;
    margin: 0 0 0 -60px;
  }
  #C_01 .content_02 .p_abslt h3 {
    color: #000;
    font-size: 20px;
    margin-bottom: 30px;
  }
  #C_01 .content_02 .p_abslt p {
    width: 100%;
    max-width: 510px;
    margin: 0 auto;
  }

  #C_01 .ico.p_abslt {
    width: 250px;
    left: inherit;
    right: 50%;
    bottom: -10px;
    margin-right: 260px;
  }
}

@media screen and (min-width: 1430px) {
  #C_01 .inner {
    width: 1430px;
    margin: 0 auto;
  }
}


/* --------------------------------------
#C_02 #C_03
----------------------------------------- */ 

.C_02_03 {
  background-image: url(images/C_01_bg.png);
  background-repeat: repeat;
  background-size: 100% auto;
  background-position: top center;
}

.C_02_03 h2 {
  font-size: 20px;
}

@media screen and (min-width: 428px) {
  .C_02_03 {
    background-size: 428px auto;
  }
}

@media screen and (min-width: 960px) {
  .C_02_03 {
    background-image: url(images/C_02_03_bg_pc.png);
    background-size: 1430px auto;
  }
  .C_02_03 h2 {
    font-size: 40px;
  }
}

/* #C_02
----------------------------------------- */ 

#C_02 {
  background: rgba(0, 0, 0, .8);
  padding: 40px 0;
}

#C_02 h2 {
  color: #fff;
}
#C_02 .inner {
  width: 82%;
  margin: 20px auto 0;
  max-width: 720px;
  padding: 10px;
}

#C_02 .inner::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 12%;
  height: 10vw;
  background: #B40019;
}
#C_02 .inner::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  height: 20vw;
  background: #F38200;
}

#C_02 video {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

#C_02 iframe {
  position: relative;
  display: block;
  width: 100%;
  height: 42vw;
  max-height: 380px;
  z-index: 1;
}

@media screen and (min-width: 960px) {
  #C_02 {
    padding: 80px 0;
  }
  #C_02 .inner {
    padding: 20px;
  }
  #C_02 .inner::before {
    width: 130px;
    height: 130px;
  }
  #C_02 .inner::after {
    width: 260px;
    height: 260px;
  }
}

/* #C_03
----------------------------------------- */ 

#C_03 {
  padding: 60px 0;
  width: 90%;
  margin: 0 auto;
}
#C_03 .flex {
  margin: 40px 0 0;
  flex-wrap: wrap;
}

#C_03 .flex div {
  margin-top: 15px;
}

#C_03 .flex div {
  width: 48%;
}
#C_03 .flex div:nth-of-type(odd) {
  margin-right: 4%;
}

@media screen and (min-width: 960px) {
  #C_03 {
    max-width: 100%;
    padding: 100px 0;
  }
  #C_03 .flex div {
    width: 31%;
    margin-top: 20px!important;
  }
  #C_03 .flex div:nth-of-type(odd) {
    margin-right: inherit;
  }
  #C_03 .flex div:nth-of-type(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
  }
}

@media screen and (min-width: 1430px) {
  #C_03 {
    max-width: 1170px;
  }
}

/* .insta_list */ 

.insta_list div{
    position: relative;
}

.insta_list div::before{
	content: "";
	display: block;
	padding-top: 100%;
}

.insta_list a{
	position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.insta_list a:hover {
  opacity: 1;
}

.insta_list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s;
}

.insta_list a:hover img {
  opacity: .4;
  transition: .3s;
}

.insta_list .count {
  position: absolute;
  display: none;
  width: 100%;
  text-align: center;
  left: 0;
  top: 50%;
  font-size: 24px;
  font-weight: bold;
  margin-top: -24px;
}
.insta_list .count span {
  vertical-align: middle;
}
.insta_list .count i {
  font-size: 30px;
  vertical-align: sub;
}
.insta_list a:hover .count {
  display: block;
}





/* --------------------------------------
-----------------------------------------
FOOTER
-----------------------------------------
----------------------------------------- */ 
footer a {
  display: block;
  width: 260px;
  margin: 30px auto;
}

footer img {
  width: 100%;
}

@media screen and (min-width: 960px) {
  footer a {
    margin: 60px auto;
  }
}