@charset "utf-8";

*{
	padding: 0;
	margin: 0;
}

.animation{/*アニメーションの名前や秒数、回数などを決められるプロパティ*/
	animation-name: animation;/*"animation"という名前のアニメーションを定義する*/
	animation-duration: 8s;/*〇秒かけてアニメーション*/
	/*animation-delay: 3s;アニメーションの開始を遅らせるプロパティ*/
  	animation-iteration-count: infinite;/*無限ループ*/
  	background: pink;
  	height: 60px;
	text-align: center;
	margin: 30px 0;
}

@keyframes animation{/*アニメーションがどのように変化するかを指定*/
	0%{ /*アニメーションを開始するときのCSS*/ /*〇秒かけてwidth: 〇%;→width: 〇%;になる動きを記述*/
    	width: 10%;
  }
	/*50%{ アニメーションの中間のCSS
		width: 40%;
	}*/
	
	100%{/*アニメーションを終了するときのCSS*/
    	width: 90%;
  }
}

/*全体的なスタイル*/
.box{
  animation-name: animation;
  animation-duration:3s;
  text-align: center;
  width: 30%;
  height: 30px;
  margin-bottom: 20px;
  background: #b0c4de;
}

/*進行度の指定*/
.ease{
	animation-timing-function:ease;/* 開始時と終了時の動きをなめらかにする*/
	animation-iteration-count:3;/*3回ループ*/
  }
  
  .ease-in{
  animation-timing-function:ease-in;/*開始時だけなめらかにする*/
  }
  
  .ease-out{
  animation-timing-function:ease-out;/*終了時だけなめらかにする*/
  }
  
  .ease-in-out{
  animation-timing-function:ease-in-out;/*easeよりもゆっくり変化させる*/
  }
  
  .linear{
  animation-timing-function:linear;/* 一定の速度で変化させる*/
  }
  
  .steps{
  animation-timing-function:steps(4, end);/* コマ送りのように変化させる*/
  }
  
  .cubic-bezier{
  animation-timing-function:cubic-bezier(0.25,0.1,0.25,0.1);/*変化の度合いをX軸・Y軸で変化させる*/
  }

  .none{
  animation-fill-mode:none;/*指定なし*/
}

.forwards{
  animation-fill-mode:forwards;/*終了時の状態を維持する*/
}

.backwards{
  animation-fill-mode:backwards;/*開始時の状態に戻る*/
}

.both{
  animation-fill-mode:both;/*開始時に"forwards"、終了時に"backwards"を適用する*/
}

.ani{
  margin-bottom: 20px;
}

/*fadeinの記述*/
.fadein{
  animation: fadein 3s infinite;/*fadeinが3秒かけてアニメーション、無限ループ*/
  font-size: 30px;
}

@keyframes fadein{
  /*fadeinの変化を記述*/
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

/*slideinの記述*/
.slidein{
  animation: slidein 3s infinite;/*slideinが3秒かけてアニメーション、無限ループ*/
  font-size: 30px;
}

@keyframes slidein{
  /*slideinの変化を記述*/
  0%{
    transform: translateX(-100px);
  }

  100%{
    transform: translateY(0);
  }
}

/*テキストが跳ねるアニメーションの記述*/
.bounce {
  animation: bounce 0.5s infinite;/*slideinが3秒かけてアニメーション、無限ループ*/
  font-size: 30px;
}

@keyframes bounce {
  /*テキストが跳ねる変化を記述*/
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.snow {
  color: pink;/*雪の色*/
  font-size: 10px;/*雪の大きさ*/
  position: fixed;
  /*雪の位置を指定-ランダムな数値を入れて雪をあちこちに降らせる*/
  text-shadow:3vw -100px 1px, 10vw -200px 3px, 15vw -700px 4px, 20vw -500px 7px, 25vw -500px 2px, 30vw -300px 1px,    36vw -400px 2px,  40vw -150px 6px, 47vw -840px 2px, 50vw -300px 5px,60vw -200px 3px, 68vw -100px 5px,    70vw -250px 1px, 80vw -620px 9px, 90vw -800px 4px;
  /*アニメーションの指定*/
  animation: snow 10s linear infinite;
}

@keyframes snow {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

/*背景色（ストライプ）をつける*/
.box21 {
	margin: 2em auto;
	padding:var(--box-padding, 2rem);
	background-image: repeating-linear-gradient(-45deg, #e6e6fa 0, #e6e6fa 3px,transparent 3px,transparent 6px);/*ストライプ*/
	width: 40%;
	/*height: 200px;*/
	}

/*少しずらしたボックス*/
.box27{
	margin: 2em auto;
	padding:2em;/*内側の余白*/
	background: none;/*元のボックス背景色なし*/
	border:1px solid #ccc ;/*線の太さ・種類・色*/
	position: relative;/*配置（基準）*/
	width: 40%;
	/*height: 200px;*/
	}
	.box27:after{
	background-color:#eee;/*ずらしたボックスの背景色*/
	border:none;
	content: '';
	position: absolute;/*配置（ここを動かす）*/
	top: 7px;/*上から7pxずらす*/
	left: 7px;/*左から7pxずらす*/
	width: 100%;
	height: 100%;
	z-index: -1;
	}

	/*一部だけ線の色を変える*/
.box28 {
	margin: 2em auto;
	padding:2em;/*内側余白*/
	border: 2px solid grey;	
	position: relative;
	z-index: 0;
	width: 40%;
	/*height: 300px;*/
	}
	.box28:before {
	border-top:2px solid yellow;
	border-left:2px solid yellow;
	content: '';
	display: block;
	position: absolute;
	top: -2px;
	left: -2px;
	width: 20px;
	height: 20px;
	z-index: 1;
	}

/*手書き風*/
.box55 {
	width: 40%;
	margin: 2em auto;
	padding:2em;/*内側余白*/
	border-radius: 50px 80px /60px 30px;
	border: solid 8px #ffff7f;
	}
	

	/*背景チェック*/
.box57 {
	width: 40%;
	margin: 2em auto;
	padding:2em;/*内側余白*/
	background-image: linear-gradient(90deg, rgba(240, 255, 33, 0.69) 50%, transparent 50%), linear-gradient(rgba(241, 241, 129, 0.641) 50%, transparent 50%);	/* チェック色 */
	background-size: 15px 15px;	/* チェックのサイズ */
	}


	/*タイトル付き（ラベルボックス）*/
.box72{
	width: 40%;
	margin: 2em auto; /* ボックスの余白 */
	background-color: #e0ffff; /* ボックス背景色 */
	padding:2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #adc0ce;	/* ボックスの線 (太さ　種類　色)*/
	}
	.box72 .box-title {
	background-color:#e0ffff; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: gray; /* タイトル文字色 */
	padding: 0 25px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -5px; /*上から（-5px）移動*/
	left: 30px; /*左から(30px)移動*/
	}

	/*マスキングテープ風*/
.box75{
	width: 40%;
	margin: 2em auto;
	background-color: #eaeaea;/*ボックス背景色*/
	padding:2.5em 2em 2em;/*ボックス内側余白*/
	position:relative;/*配置(ここを基準に)*/
	}

	.box75 .box-title {
	background-image: repeating-linear-gradient(-45deg,#F6EEEC 0, #F6EEEC 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 1em;/*タイトル文字の大きさ*/
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/*配置(ここを動かす)*/
	top: -15px; /*上から（-10px）移動*/
	left: 20px; /*左から(20px)移動*/
	}

	/*セロテープ風*/
.box76{
	width: 40%;
	margin: 2em auto; /* ボックスの余白 */
	background-color: #E6ECF2; /* ボックス背景色 */
	padding:2.5em 2em 2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	}
	.box76 .box-title {
	background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 1em;/*タイトル文字の大きさ*/
	color: #666; /*タイトル文字色 */
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/*配置(ここを動かす)*/
	top: -15px; /*上から（-10px）移動*/
	left: 20px; /*左から(20px)移動*/
	}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	right: 20px;
	bottom: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	visibility: hidden; 
	transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	/*改行禁止*/
    white-space: nowrap;
	/*矢印の動き*/
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
	right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
	right:0;
}

/*スライダー*/
  @import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");
  :root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #f8f8f8;
    --color-gray: #ddd;
    --color-theme: #f5695f;
    --color-theme-darken: #f12617;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
  }

  html {
    font-family: "Spartan", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    font-size: 62.5%;
    line-height: 1.8;
    height: 100%;
    word-break: break-word;
    color: #333;
    background-color: var(--color-base);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-size: 1.6rem;
    margin: 0;
  }

  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  ::-moz-selection {
    color: #fff;
    background: var(--color-theme);
  }

  ::selection {
    color: #fff;
    background: var(--color-theme);
  }

  img {
    border: 0;
    margin: 0;
  }

  figure {
    margin: 0;
  }

  p {
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #333;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
  }

  main {
    display: block;
  }

  .l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10rem;
  }

  .l-section {
    border-top: 1px solid #eee;
  }
  .l-section .l-inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  [class*=swiper]:focus {
    outline: none;
  }

  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }


  .swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .swiper-button-prev::before, .swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
  }
  .swiper-button-prev::after, .swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
  }
  .swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
  }

  .card04 {
    overflow: hidden;
  }
  .card04 .swiper {
    overflow: visible;
  }
  .card04 .swiper-button-prev, .card04 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .card04 .swiper-button-prev::before, .card04 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: var(--box-shadow-dark);
            box-shadow: var(--box-shadow-dark);
  }
  .card04 .swiper-button-prev::after, .card04 .swiper-button-next::after {
    border-color: #fff;
  }
  .card04 .swiper-button-prev {
    right: calc(100% - 1.6rem);
  }
  .card04 .swiper-button-next {
    left: calc(100% - 1.6rem);
  }
  .card04 .swiper-a:not(.swiper-initialized) {
    padding: 0;
  }
  .card04 .swiper-a:not(.swiper-initialized) .swiper-button-prev,
  .card04 .swiper-a:not(.swiper-initialized) .swiper-button-next {
    display: none;
  }
  .card04 .swiper-a:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .card04 .swiper-b:not(.swiper-initialized) {
    padding: 0;
  }
  .card04 .swiper-b:not(.swiper-initialized) .swiper-button-prev,
  .card04 .swiper-b:not(.swiper-initialized) .swiper-button-next {
    display: none;
  }
  .card04 .swiper-b:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .card04 .slide {
    overflow: hidden;
    border-radius: 4px;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
  }
  .card04 .slide-media {
    padding-top: 62.5%;
  }
  .card04 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
  }
  .card04 .slide-content {
    padding: 3.2rem;
  }
  .card04 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
  }
  .card04 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
  }



  @media only screen and (max-width: 1024px) {
    html {
      -webkit-text-size-adjust: 100%;
    }
    .l-inner {
      padding: 0 4rem;
    }
    .pc {
      display: none !important;
    }
    .card04 .swiper {
      padding: 0 3.2rem;
    }
    .card04 .swiper-button-prev {
      right: calc(100% - 5.2rem);
    }
    .card04 .swiper-button-next {
      left: calc(100% - 5.2rem);
    }
  }

  @media only screen and (max-width: 599px) {
    html {
      font-size: 50%;
    }
    .pc-tab {
      display: none !important;
    }
    .card04 .swiper-b:not(.swiper-initialized) .swiper-wrapper {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  @media only screen and (min-width: 1025px) {
    .tab-sp {
      display: none !important;
    }
    .swiper-button-prev::before, .swiper-button-next::before {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    .card04 .slide {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .card04 .slide img {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .card04 .slide:hover {
      -webkit-transform: translateY(-16px);
              transform: translateY(-16px);
      -webkit-box-shadow: var(--box-shadow-hover);
              box-shadow: var(--box-shadow-hover);
    }
    .card04 .slide:hover img {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }

  @media only screen and (min-width: 600px) {
    .sp {
      display: none !important;
    }
  }

  @media only screen and (max-width: 1024px) and (min-width: 600px) {
    .card04 .swiper-b:not(.swiper-initialized) .swiper-wrapper {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
  }