@charset "utf-8";
body {
  font-family: "Sawarabi Gothic", sans-serif;
  font-optical-sizing: 14px;
  line-height：1.5em
  font-weight: 400;
  font-style: normal;
  background-color: #E6E5E4;
}
a {
  color: #769CBF;
  text-decoration: none;
  transition: .3s;
  &:hover {
    text-decoration: underline;
  }
}
img {
  width: 100%;
  height: auto;
  display: block;
}
[class^="col"] a img {
  transition: .3s;
  &:hover {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
}
li {
  font-optical-sizing: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
section {
  line-height: 1.5;
}
.ex1{
font-size:16px;
line-height:250%;
letter-spacing:100;
}
span {
  text-decoration: underline;
}
/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#header {
  height: 170px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #25271F;
  color: #000000;
  text-align: center;
  padding: 20px;
  background-color: #E6E5E4;/
}
/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin {
  position: fixed;
  z-index: 999; /*最前面へ*/
  height: 70px;
  animation: DownAnime1 0.5s forwards;
}
@keyframes DownAnime1 {
  from {
    opacity: 0;
    transform: translateY(-170px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*========= レイアウトのためのCSS ===============*/
h1 {
  font-size: 1.2rem;
  text-align: center;
}
h2 {
  font-size: 1.2rem;
  color: #769CBF;
  text-align: center;
  margin: 0 0 30px 0;
}
h3 {
  font-size: 1.1rem;
  border-bottom: solid 1px #999;
  }
h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: normal;
}
.lightup {
  background: linear-gradient(transparent 60%, #BBD3DE 40%);
  display:inline
}
p {
  margin: 1em 0;
  font-size: .9rem;
}
p.custom2 {
	line-height: 180%;
}
footer {
  background: #333;
  padding: 30px;
}
small {
  background: #333;
  color: #ccc;
  display: block;
  text-align: center;
  padding: 20px;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #25271F;
  padding: 10px;
  transition: all 0.3s;
}
nav ul li.current a, nav ul li a:hover {
  color: #769CBF;
}
section {
  padding: 30px;
  & article {
    margin: 2rem 0;
  }
}
.container {
  max-width: 800px;
  margin: 0 auto;
}
/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s;
  &:hover {}
  & img {
    width: 100px;
    height: 100px;
  }
}
/*バナー*/
.banner {
	max-width:200px;
}
/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime1 0.5s forwards;
}
@keyframes UpAnime1 {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime2 0.5s forwards;
}
@keyframes DownAnime2 {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}
/*news*/
.slider {
  box-sizing: border-box;
	  font-size: .8rem;
  & span {
    display: inline-block;
    margin-right: 10px;
  }
}
/*768px以下の見た目 ※1行のままにしたい場合は不要　*/
@media screen and (max-width:768px) {
  .slider {
    padding: .5rem 1rem;
    background: #fff;
    & li {
      border-bottom: 1px dashed #ccc;
    }
    & li:last-child {
      border-bottom: none;
    }
    & span {
      display: block;
      padding-bottom: 10px;
    }
  }
}
/*gallery*/
figcaption {
  text-align: center;
  color: #777;
  font-size: .8rem;
}
/*SNS*/
.snslink {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
  & li {
    margin: 0 .5rem;
  }
  & img {
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin: 0 auto;
    padding: .5rem;
    background: #fff;
    border-radius: 10px;
  }
}
.flexbox {
  display: flex;
  flex-direction: row;
  text-align: center;
}
/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
  opacity: 0;
}
/*==================================================
パタッ
===================================*/
/* 下へ */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}
/* 左へ */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}
@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 左上へ */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
/* 右へ */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}
@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 右上へ */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger, .flipLeftTrigger, .flipLeftTopTrigger, .flipRightTrigger, .flipRightTopTrigger {
  opacity: 0;
}
/*==================================================
くるっ
===================================*/
/* X 軸（縦へ） */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }
  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}
/*　Y軸（横へ） */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}
/* Z 軸（左へ） */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}
/*　Z 軸（右へ） */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger, .rotateYTrigger, .rotateLeftZTrigger, .rotateRightZTrigger {
  opacity: 0;
}
/*==================================================
ボンッ、ヒュッ
===================================*/
/* 拡大 */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* 縮小 */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger, .zoomOutTrigger {
  opacity: 0;
}
/*==================================================
じわっ
===================================*/
/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0;
}
/*==================================================
にゅーん
===================================*/
/* 滑らかに変形して出現 */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}
@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
  opacity: 0;
}
/*==================================================
スーッ（枠線が伸びて出現）
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
  position: relative; /* 枠線が書かれる基点*/
  opacity: 0;
}
.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*上下線*/
.lineTrigger::before, .lineTrigger::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333; /* 枠線の色*/
}
/*左右線*/
.line2::before, .line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333; /* 枠線の色*/
}
/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0;
}
.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}
/*右線*/
.line2::before {
  top: 0;
  right: 0;
}
.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}
/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0;
}
.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}
/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
}
.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}
@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0; /*初期値を透過0にする*/
}
@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*==================================================
シャッ（背景色が伸びて出現）
===================================*/
/*背景色が伸びて出現（共通）*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*右から*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
/*下から*/
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/*上から*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger, .bgUDextendTrigger, .bgDUextendTrigger, .bgRLextendTrigger, .bgLRextendTrigger {
  opacity: 0;
}
/*========= レイアウトのためのCSS ===============*/
.wrapper {
  overflow: hidden;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing: border-box;
}
.bgextend, .lineTrigger {
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing: border-box;
}
/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2; /*この数字を必要回数分に変更*/
}
.countinfinite {
  animation-iteration-count: infinite; /*無限ループ*/
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s;
}
.delay-time1 {
  animation-delay: 1s;
}
.delay-time15 {
  animation-delay: 1.5s;
}
.delay-time2 {
  animation-delay: 2s;
}
.delay-time25 {
  animation-delay: 2.5s;
}
/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s;
}
.change-time1 {
  animation-duration: 1s;
}
.change-time15 {
  animation-duration: 1.5s;
}
.change-time2 {
  animation-duration: 2s;
}
.change-time25 {
  animation-duration: 2.5s;
}
/**/
.aspect1-1 {
  aspect-ratio: 1/1;
  object-fit: cover;
}
/*==================================================
button
===================================*/
.button {
  display: block;
  text-align: center;
  color: #fff;
  background: #666;
  border-radius: 5px;
  transition: :3s;
  &:hover {
    text-decoration: none;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
  }
}