@charset "utf-8";
html {
  width: 100vw;
  overflow-x: hidden !important;
}
body {
  background-color: #ECECEC;
  background-image: url("../img/bg_noise.jpg");
  background-size: contain;
  color: #333333;
  overflow-x: hidden;
  margin: 20px 0 0;
  position: relative;
}

/* CSS Document */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
  display: none;
}
/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, .modaal-close:before {
  background: #ccc;
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #666;
}
/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
  font-size: 1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}
/******logo******/
.logo {
  margin-left: 10px;
  margin-bottom: 40px;
}
.logo-ttl {
  font-size: 36px;
}
.logo-ttl__link {
  text-decoration: none;
  color: #333;
}
.logo-ttl__in {}
/******title******/
.title {
  margin-left: 10px;
  margin-bottom: 30px;
}
.title-season {
  margin-bottom: 20px;
}
.title-season__in {
  font-size: 20px;
}
.title-ttl_ {}
.title-ttl__in {
  font-size: 26px;
}
/******modal******/
.modal {
  margin-bottom: 40px;
}
.modal-list {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.modal-item {
  width: 25%;
}
.modal-item__img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
@media screen and (min-width: 600px) {
  .modal-item {
    width: 20%;
  }
  .modal-item__img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
  }
}
@media screen and (min-width: 1200px) {
  .modal-item {
    width: 20%;
  }
  .modal-item__img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}
/******by******/
.by {
  padding-right: 20px;
  text-align: end;
  margin-top:10px;
  margin-bottom: 60px;
	
}
.by-txt {
  font-size: 18px;
  letter-spacing: 0.4em;
}
.by-txt__in {}
/******other******/
.other {
  margin-bottom: 60px;
}
.other-ttl {
  font-size: 18px;
  margin-bottom: 15px;
}
.other-ttl__in {
  letter-spacing: 0.2em;
}
.other-list {
  display: flex;
  list-style: none;
}
.other-item {
  padding: 0 10px;
}
.other-item__link {
  text-decoration: none;
  color: #333333;
}

/******youtube******/
.youtube{
	margin-left: 10px;
}
.youtube__in iframe{
  width:240px ;
  height:150px;
}

@media screen and (min-width: 1200px) {
.youtube__in iframe{
  width:560px ;
  height:315px;
}
}
/******back******/
.back {
  margin-left: 20px;
}
.back-txt {}
.back-txt__link {
  text-decolation: none;
  text-decoration-line: none;
  color: #333333;
}
.p-top-txt {
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 1.2em;
  margin-top: 0;
  margin-bottom: 10px;
}
.p-top-sub {
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.2em;
  margin-top: 0;
  margin-bottom: 10px;
}
.p-top-main {
  font-size: 36px;
  letter-spacing: 0.1em;
  line-height: 1.2em;
  margin-top: 0;
  margin-bottom: 10px;
}

@media screen and (min-width: 800px) {
.p-top-txt {
  font-size: 100px;
}
.p-top-sub {
  font-size: 42px;
}
.p-top-main {
  font-size: 62px;
}	
.p-top-txt-sub {
  font-size: 74px;
}
.p-top-link {
  font-size: 74px;
}
}
.p-top-txt__link{
	text-decoration: none;
	color: #333;
}
.p-top-txt-sub {
  font-size: 36px;
  margin-bottom: 20px;
}
.p-top-link {
  font-size: 42px;
  text-decoration: none;
  color: #333333;
}
.p-top-link:hover {
  color: #333333;
  -webkit-text-fill-color: #ECECEC; /* （順序に関係なく）色を上書きする */
  -webkit-text-stroke: 1px #333;
}

.footer{
  margin-top: 60px;
  text-align: center;
}
/*----------font----------*/
.p-top__a {
  font-family: "Sail", system-ui;
}
.p-top__b {
  font-family: "Pirata One", system-ui;
}
.p-top__c {
  font-family: "Lexend Tera", sans-serif;
  font-optical-sizing: auto;
}
.p-top__d {
  font-family: "Slackey", sans-serif;
}
.p-top__e {
  font-family: "Waiting for the Sunrise", cursive;
}
.p-top__f {
  font-family: "Squada One", sans-serif;
}
.p-top__g {
  font-family: "Averia Gruesa Libre", system-ui;
}
.p-top__h {
  font-family: "Beau Rivage", cursive;
}
.p-top__i {
  font-family: "Bebas Neue", sans-serif;
}
.p-top__j {
  font-family: "Girassol", serif;
}
.p-top__k {
  font-family: "Bruno Ace SC", sans-serif;
}
.p-top__l {
  font-family: "Diplomata SC", serif;
}
.p-top__m {
  font-family: "Platypi", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.p-top__n {
  font-family: "Barrio", system-ui;
}
.p-top__o {
  font-family: "Arbutus Slab", serif;
}
.p-top__p {
  font-family: "Fascinate", system-ui;
}
.p-top__q {
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-variation-settings:
    "BNCE"0, "INFM"0, "SPAC"0;
}
.p-top__r {
  font-family: "Shadows Into Light", cursive;
}
.p-top__s {
  font-family: "Fontdiner Swanky", serif;
}
.p-top__t {
  font-family: "Wire One", sans-serif;
}
.p-top__u {
  font-family: "Patua One", serif;
}
.p-top__v {
  font-family: "M PLUS Code Latin", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth"100;
}
.p-top__w {
  font-family: "Oleo Script", system-ui;
}
.p-top__x {
  font-family: "Edu QLD Beginner", cursive;
  font-optical-sizing: auto;
}
.p-top__y {
  font-family: "UnifrakturCook", cursive;
}
.p-top__z {
  font-family: "Kavoon", serif;
}
.p-top__0 {
  font-family: "Nosifer", sans-serif;
}
.p-top__1 {
  font-family: "Notable", sans-serif;
}
.p-top__2 {
  font-family: "Glass Antiqua", cursive;
}
.p-top__3 {
  font-family: "Macondo Swash Caps", cursive;
}
.p-top__4 {
  font-family: "Cinzel Decorative", serif;
}
.p-top__5 {
  font-family: "Stalemate", cursive;
}
.p-top__6 {
  font-family: "Covered By Your Grace", cursive;
}
.p-top__7 {
  font-family: "Pontano Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.p-top__8 {
  font-family: "Rubik Maze", system-ui;
}
.p-top__9 {
  font-family: "Stick", sans-serif;
}
.p-top__0 {
  font-family: "Asset", serif;
}