@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');
html{font-size: 62.5%;}




/*　枠線＋テキストが出現 　*/
.lineText{
	position: relative;/*テキストの基点となる位置を定義*/
}

/*線の設定*/
.lineText span.mask{
	position: relative;
	display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
}

.lineText span.mask::before,
.lineText span.mask::after{
    position: absolute;
    top: 4%;
    right: 2.5%;
    bottom: 4%;
    left: 2.5%;
    z-index: 3;
    content:"";
    opacity: 0;
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.lineText span.mask::before {
    border-top: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    border-bottom: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
 background-color: rgba(255, 255, 255, 0.8);
    transform: scale(0,1);
}

.lineText span.mask::after{
    border-right: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    border-left: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    transform: scale(1,0);
}

.lineText:hover span.mask::before,
.lineText:hover span.mask::after{/*hoverした時の変化*/
	opacity: 1;
    transform: scale(1);
}

/*中央テキスト*/
.lineText span.cap{
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	position: absolute;
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #000;/*テキストの色を変えたい場合はここを修正*/
text-shadow: 1px 2px 3px #FFF;
    line-height: 1.5;/*行の高さを1.5にする*/
}

.lineText:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}


.grid_layout {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 2fr;  /* 縦向きのグリッドラインを決める */
height:auto;
     grid-template-rows:1fr 1fr;     /*横向きのグリッドラインを決める */
}
.grid_layout-child {
    padding:  0px;         /* 余白指定 */
    border-radius:  0px;    /* 角丸指定 */
    margin: 0px;            /* 周りの余白指定 */
    color:  #fff;           /* 文字色指定 */
}

.grid_layout-child:nth-child(1) {
    grid-column:1/2;    /* 配置指定 */
    grid-row:1/2;       /* 配置指定 */
    margin-right: 5px;
 margin-bottom: 5px;
}
.grid_layout-child:nth-child(2) {
    grid-column:1/2;    /* 配置指定 */
    grid-row:2/2;       /* 配置指定 */
    margin-right: 5px;
 margin-top: 5px;
}
.grid_layout-child:nth-child(3) {
    grid-column:2/3;    /* 配置指定 */
    grid-row:1/3;       /* 配置指定 */
    margin-left: 1px;
}


.grid2_layout {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 1fr;  /* 縦向きのグリッドラインを決める */
height:auto;
     grid-template-rows:1fr;     /*横向きのグリッドラインを決める */
}
.grid2_layout-child {
    padding:  0px;         /* 余白指定 */
    border-radius:  0px;    /* 角丸指定 */
    margin: 0px;            /* 周りの余白指定 */
    color:  #000000;           /* 文字色指定 */
}

.grid2_layout-child:nth-child(1) {
    grid-column:1/2;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
    margin-right: 5px;
}
.grid2_layout-child:nth-child(2) {
    grid-column:2/2;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
    margin-left: 5px;
}

.grid3_layout {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 1fr 1fr;  /* 縦向きのグリッドラインを決める */
    height:auto;
     grid-template-rows:1fr;     /*横向きのグリッドラインを決める */
}
.grid3_layout-child {
    padding:  5px;         /* 余白指定 */
    border-radius:  0px;    /* 角丸指定 */
    margin: 0px;            /* 周りの余白指定 */
    color:  #000;           /* 文字色指定 */
}

.grid3_layout-child:nth-child(1) {
    grid-column:1/2;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
}
.grid3_layout-child:nth-child(2) {
    grid-column:2/3;    /* 配置指定 */
    grid-row:1/1;
}
.grid3_layout-child:nth-child(3) {
    grid-column:3/3;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
}

.grid4_layout {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 1fr 1fr 1fr;  /* 縦向きのグリッドラインを決める */
    height:auto;
     grid-template-rows:1fr;     /*横向きのグリッドラインを決める */
}
.grid4_layout-child {
    padding:  0px;         /* 余白指定 */
    border-radius:  0px;    /* 角丸指定 */
    margin: 0px;            /* 周りの余白指定 */
    color:  #000;           /* 文字色指定 */
}

.grid4_layout-child:nth-child(1) {
    grid-column:1/4;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
}
.grid4_layout-child:nth-child(2) {
    grid-column:2/4;    /* 配置指定 */
    grid-row:1/1;
}
.grid4_layout-child:nth-child(3) {
    grid-column:3/4;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
}
.grid4_layout-child:nth-child(4) {
    grid-column:4/4;    /* 配置指定 */
    grid-row:1/1;       /* 配置指定 */
}

.grid {
width: 100%;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

/*==================================================
スライダーのための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;/*ドットボタンの現在地表示の色*/
}

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

.slider2 img {
    height:auto;
}

.slider2 .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider2 .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

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

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

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

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

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

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

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

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

/* 点滅 */
.blinking{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*========= レイアウトのためのCSS ===============*/
body{
width: 100%;
    font-size: clamp(1rem, 1.2vw + 1rem, 1.5rem);
    text-align: center;
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color: #000000;
    line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}


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

a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
}
		.shadow {
  box-shadow : 8px 8px 8px 3px rgba(73, 52, 60, 0.7);  /* 画像の影 */
}

.span{display:block;}


/*エリア全体を中央寄せ*/
.wrapper{
  overflow: hidden;
	text-align:center;
	width:100%;
	max-width:600px;
	margin:0 auto;
}

h1{
	text-align: center;
	font-size: clamp(2rem, 2vw + 2rem, 4rem);
	letter-spacing: 0.1em;
	text-transform: none;
	margin:20px 0;
}

h2{
	text-align: center;
	font-size: clamp(1.5rem, 1.2vw + 1rem, 3rem);
	font-weight:bold;
	text-transform: none;
}

p{
	font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
	line-height: 1.6;
	text-align:center;
	padding: 5px;
	word-wrap : break-word;
}

	 .circle{
	width: 100%;
	height: auto;
	border-radius: 50%;
	background-color:#FFFFFF;
}
	

/*エリア全体を中央寄せ*/


.flex{
  display:flex;
  flex-wrap: wrap;
}

/* みぎよせ */
.parcent_l {
margin-left: 50%;
}
.pixel_l {
margin-left: 500px;
}

/* ひだりよせ */
.parcent_r {
margin-right: 30%;
}
.pixel_r {
margin-right: 500px;
}



.text {
	z-index: 2;
  margin: 0; /* 見出しのマージンを消しておく */
  position: absolute; /* 絶対配置で画像の中央に配置 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #FFF;
  font-weight: 800;
  font-size: 30px;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.two-calm{
	display: flex;
	flex-wrap:wrap;
}
.two-calm li {
	width: calc(100%/2);/*←画像を横に4つ並べる場合*/
	padding:0 px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.two-calm li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

.two-calms{
	display: flex;
	flex-wrap:wrap;
	padding:0px;
}
.two-calms li {
	width: calc(100%/3);/*←画像を横に4つ並べる場合*/
	padding:0px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.two-calms li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

.four-calms{
	display: flex;
	flex-wrap:wrap;
	padding:0px;
}
.four-calms li {
	width: calc(100%/2);/*←画像を横に4つ並べる場合*/
	padding:0px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.four-calms li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

.wrapper3{
  overflow: hidden;
	text-align:center;
	width:100%;
	max-width:1000px;
}

.two-calmss{
	display: flex;
	flex-wrap:wrap;
align-items: center;
}
.two-calmss li {
width: 30%;/*←画像を横に4つ並べる場合*/
	padding:0px;/* 画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.two-calmss li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

.two-calmsss{
	display: flex;
	flex-wrap:wrap;
align-items: center;
}
.two-calmsss li {
width: 70%;/*←画像を横に4つ並べる場合*/
	padding:0px;/* 画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.two-calmsss li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}


.posi_m {
  margin-top: -80%; /* 上方向にネガティブマージンを取る */
margin-left: 0%;
}

.nega_m {
 margin: 0 0 0 auto;
}

.posi_m2 {
  margin-top: -120%; /* 上方向にネガティブマージンを取る */
margin-left: 0%;
}

.right {
    margin: 0 0 0 auto;
}


/*モバイルファースト*/

.card-container{
    display: flex;
    margin: 0px auto;
    width: 100%;
vertical-align:middle;
}
.card-container a{
    text-decoration: underline;
    color: #70000f;
}

.card-text{
    width:100%;
    margin: 0px;
}
.card-text h2{
    font-size: 0.6em;
}
.card-text p{
    font-size: 0.6em;
}
.card-img{
    width: 80%;
}

img{
    width:100%;
    height:100%;
    vertical-align:bottom;
}

/*PCサイズ*/

@media screen and (min-width:650px) {
    .card-container{
        max-width: 900px;
        height: auto;
    }

    .card-text h2{
        font-size: 1em;
    }
    .card-text p{
       font-size: 0.8em;
    }
}


    .container {
      width: 100%;
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    .container>img {
      width: 200px;
      margin: 15px;
    }

    .container2 {
      width: 800px;
		max-width: 100%;
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    .container2>img {
      width: 200px;
      margin: 15px;
    }

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info{
	display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合
.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;
}*/

button.modaal-close{
    display: none;
}


/*==================================================
ふわっ
===================================*/

.wataame {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade_on {
    opacity: 1;
}

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger{
    opacity: 0;
}

    /* box-shadowとdrop-shadow */
    .box-and-drop .box-shadow {
      box-shadow: 10px 10px 5px 0 rgb(61, 61, 63, 0.5);
    }
    .box-and-drop .drop-shadow {
      filter: drop-shadow(10px 10px 5px rgb(61, 61, 63, 0.5));
		transform: translateZ(0);
    }

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* ボタン共通設定 */
.btn03{
    /*影の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
    text-align: center;
    background: transparent;
	border-radius: 25px;
	border: solid 1px #665150;
    outline: none;
	width: 70%;
    /*アニメーションの指定*/
    transition: all 0.1s ease;
	-webkit-transition: -webkit-transform 0.1s;
	transform: translateZ(0);
}

/*hoverをした後のボタンの形状*/
.btn03:hover{

	border-color:transparent !important;
}

/*ボタンの中のテキスト*/
.btn03 span {
	position: relative;
	z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
	display: block;
    padding: 10px 5px;
	background:#f5b8a2;
	border-radius: 25px;
	color:#000000;
    /*アニメーションの指定*/
    transition: all 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s;
}

/* ボタン共通設定 */
.btn04{
    /*影の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
    text-align: center;
    background: transparent;
	border-radius: 25px;
	border: solid 1px #000000;
    outline: none;
	width: 15%;
    /*アニメーションの指定*/
    transition: all 0.1s ease;
	-webkit-transition: -webkit-transform 0.1s;
	transform: translateZ(0);
}

/*hoverをした後のボタンの形状*/
.btn04:hover{

	border-color:transparent !important;
}

/*ボタンの中のテキスト*/
.btn04 span {
	position: relative;
	z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
	display: block;
    padding:0px;
	background:#ece0e4;
	border-radius: 25px;
	color:#665150;
    /*アニメーションの指定*/
    transition: all 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s;
}

/*== 右下に押し込まれる（立体が平面に） */

/*影の設定*/
.pushright:before {
    content: "";
    /*絶対配置で影の位置を決める*/
    position: absolute;
	z-index: -1;
    top: 4px;
    left: 4px;
    /*影の形状*/
    width: 100%;
    height: 100%;
	border-radius: 25px;
    background-color: #333;
}

/*hoverの際にX・Y軸に4pxずらす*/
.pushright:hover span {
	background-color: #333;
	color: #fff;
	transform: translate(4px, 4px);
}


/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #640f14;

    font-size: clamp(1rem, 2vw + 1rem, 2rem);
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
	background:#640f14;
    /*アニメーションの指定*/
    transition: all .3s;
		transform: translateZ(0);
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#640f14;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}


/*== モーダル表示 */
.md-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  z-index: 9999;
}
 
.md-contents{
  display: none;
  position: fixed;
  top: 5%;
  left: 50%;
  width: 90%;
  height: auto;
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 10000;
}
 
 
.md-inner{
  padding: 24px 35px;
  background: #fff;
  height: 80%;
}
 .md-img {
    max-height: calc(100vh - 350px);
}
 
 
.md-xmark{
  position: absolute;
  top: 14px;
  right: 10px;
  width: 25px;
  height: 22px;
  z-index: 9999;
  cursor: pointer;
}
 
.md-xmark span {
  height: auto;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
}
 
.md-xmark span:nth-of-type(1) {
  top: 0;
  transform: translateY(10px) rotate(-45deg);
}
 
 
.md-xmark span:nth-of-type(2) {
  bottom: 0;
  transform: translateY(-10px) rotate(45deg);
}

.flex{
    display: flex;
    justify-content: space-between;
}
.flex>p{
    width: 49%;
}

/*メイン画像重ねる*/
.img_box{
   position: relative;
   }
.img_box li{
   position: absolute;
}
.img_box .tag_box {
   top: 10px;
   left: 10px;
}
.img_box .date_box {
}
.img_box img{
   width: 100%;
}

/*画像サイズ80*/
.img_box80{
   position: relative;
   }
.img_box80 li{
   position: absolute;
}
.img_box80 .tag_box {
   top: 10px;
   left: 10px;
}
.img_box80 .date_box {
}
.img_box80 img{
   width: 80%;
}

/*画像サイズ80右*/
.img_box80r{
    text-align: right;
   }

}
.img_box80r .tag_box {
   top: 10px;
   left: 10px;
}
.img_box80r .date_box {
}
.img_box80r img{
   width: 80%;
}

/*画像サイズ60右*/
.img_box60r{
    text-align: right;
	margin: 20px;
   }

}
.img_box60r .tag_box {
   top: 10px;
   left: 10px;
}
.img_box60r .date_box {
}
.img_box60r img{
   width: 70%;
}

/*画像サイズ60左*/
.img_box60l{
    text-align: left;
	margin: 20px;
   }

}
.img_box60l .tag_box {
   top: 10px;
   left: 10px;
}
.img_box60l .date_box {
}
.img_box60l img{
   width: 70%;
}


/*画像サイズ80左*/
.img_box80l{
    text-align: left;
   }

}
.img_box80l .tag_box {
   top: 10px;
   left: 10px;
}
.img_box80l .date_box {
}
.img_box80l img{
   width: 80%;
}

.img_box45 .tag_box {
   top: 10px;
   left: 10px;
}
.img_box45 .date_box {
}
.img_box45 img{
   width: 45%;
}

/*文字のアンダーライン*/
.highlight {
    background: linear-gradient(transparent 50%, #f5b8a2 0%);
    line-height: 1.3em;
}





/* -------------------------------
        いがらし追加分
------------------------------- */


/*トップに戻るボタン
------------------------------- */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #ca3224;
    border: solid 0px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}

* {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
}
body {
  padding: 0px 0px;
}
h1 {
  margin-bottom: 0px;
}
h2 {
  margin-bottom: 0px;
}


/*フォント
------------------------------- */

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
 font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/*テキスト
------------------------------- */
p.maintext {
   color:#fff; 
   font-family:Zen Old Mincho;
   font-size: 12px;
}

p.maintext2 {
   color:#fff; 
   font-family:Zen Old Mincho;
   font-size: 18px;
}

p.maintext3 {
   color:#fff; 
  font-weight: bold;
   font-size: 34px;
}

p.maintext4 {
   color:#fff; 
   font-family:Zen Old Mincho;
   font-size: 32px;
}


/*アニメーション
------------------------------- */
@charset "UTF-8";
h1 {
    color: #0bd;
}
h2 {
    color: navy;
}
p {
    color: rgba(10, 130, 165, .5);
}

@charset "utf-8";


/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.8s;
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.8s;
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.8s;
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.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*========= レイアウトのためのCSS ===============*/




.flex{
	display:flex;
	flex-wrap: wrap;
}

.box{
	width: 220px;
	padding: 20px;
	margin:0 20px 20px 20px;
	background: #666;
	color: #fff;
}

.fadeUpTrigger{
opacity:0;
}


.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}


.album {
	margin: auto;
	position: relative;
}

.album img {
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:5s;
	-webkit-animation-delay:5s;
	position: absolute;
	top: 0;
	left: 0%;
}

@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@-webkit-keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}