@font-face {
	font-family: 'aoyagireishosimo';
	src: url('../common/font/aoyagireisyosimo_otf_2_01.otf') format('opentype');
	font-display: swap;
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	/* 25/05 追記 */
	.Details p, .Details h3, .Details h4, .Details h5, .Details h6,
	.sumou td {
		/* 翻訳対応、文字折り返し可能に */
		word-break: break-word;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
		.colouring .color_box {/* テキスト量でボックスが縮まないように */
		    flex-shrink: 0;
		}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!(トップページ)!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#contents_body.Archive,
#contents_body.MyCoorde {
	text-align: center;
	position: relative;
	box-shadow:10px 10px 10px rgba(0,0,0,0.4);
}
#contents_body.TopPage {
	background: none;
}
#contents_body {
	padding: 0;
}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!(トップページ)!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/



.TopPage .slideshow_box,
.diary_index,
.coorde_index {
	position: relative;
	margin: 50px 0 100px;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
/*!!!!!!!!!!!!!タグデザイン!!!!!!!!!!!!!!!!!!*/

.TopPage h2 {
	line-height: 2;
    font-weight: normal;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-100%);
    color: #fdfdfd;
    border-radius: 10px 10px 0 0;
}
.slideshow_box h2 { background: #22ac38; }
.diary_index h2 { background: #228aac; }
.coorde_index h2 { background: #ac2299; }


/*!!!!!!!!!!!!!!.slideshow_box!!!!!!!!!!!!!!!!!!!!!*/

.TopPage .skitter {
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
}
	.TopPage .skitter .box_clone {
		width: 100% !important;  /* box_clone の幅を強制的に親要素いっぱいに */
	}
		.TopPage .skitter .box_clone img {
		    width: 100%;  /* 画像を.box_cloneの幅に収める */
		}

.TopPage .skitter .play_pause_button {
    transform: initial!important;
    top: initial!important;
    left: initial!important;
    bottom: 0%!important;
    right: 0%!important;
}
.TopPage .label_skitter {
    background: rgb(0, 0, 0, 0.7);
}
.TopPage .label_skitter p {
    font-weight: normal;
    color: #fdfdfd;
    padding: 5px;
    text-align: center;
}

/*!!!!!!!!!!!!!!!.diary_index!!!!!!!!!!!!!!!!!!!*/

.diary_index {
    display: flex;
    flex-wrap: wrap;
	cursor: pointer;
}

.diary_index a {
	width: calc(100% / 3);
	aspect-ratio: 3 / 2;
}
.diary_index figure.hover-parent {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.hover-parent img { width: 100%; height: 100%;}

.hover-mask-column {/* figcaption */
	text-align: center;
	width: 100%;
	height: 100%;
	padding: 5px;
	background: rgba(0,0,0,0.5);
	color: #fdfdfd;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition:all 0.45s ease;
}


/*!!!!!!!!!!!!!!!!.coorde_index!!!!!!!!!!!!!!!!!!*/

.TopPage .coorde_index {

}
	.coorde_index ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.coorde_index li {
		width: calc(100% / 4);
		list-style: none;
		overflow: hidden;
	}
	.coorde_index li a {
		display: block;
	}
	.coorde_index a img {
		vertical-align: bottom;
		transition: 0.35s;
		width: 100%;
	}
	.coorde_index a:hover img {
		transform: scale(1.1);
	}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!(アーカイブ)!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.Archive .sentence_head {
	width: 100%;
    height: auto;
    background: url("images/img_contents_backgroundhead.jpg") center center / 100% 100% no-repeat;
    padding: 50px 0 25px;
}
	.sentence_head h2 {/* 日誌タイトル */
		font-family: "Yusei Magic", sans-serif;
		font-weight: normal;
		font-style: normal;
		letter-spacing: 3px;
		display: inline-block;
		border-bottom: 3px solid brown;
	    margin: 0;
		text-shadow: 1px 1px 0 #fdfdfd, -1px -1px 0 #fdfdfd,
		            -1px 1px 0 #fdfdfd, 1px -1px 0 #fdfdfd,
		             0px 1px 0 #fdfdfd, 0 -1px 0 #fdfdfd,
		            -1px 0 0 #fdfdfd, 1px 0 0 #fdfdfd;
	}
.Archive .sentence_body {
	background:url("images/img_contents_backgroundbody.jpg") center center / 100% auto repeat-y;
    padding-bottom: 1px;/* これないとなぜかスキマが… */
}
.Archive .sentence_foot {
	width:100%;
}
.Archive .sentence_foot img{
	width:100%;
	vertical-align:top;
}
.sentence_body img {
	width: 75%;
	height: auto;
	vertical-align: bottom;
}

.Archive h3 {/* .now .lyrics01 */
	font-size: 1.375rem;
	font-weight: normal;
}

.sentence_body p {
	width: 75%;
	/*font-weight: bold;*/
	margin: 50px auto;
	word-break: break-all;
	text-align: justify;
}


/*!!!!!!!!!!![相撲]!!!!!!!!!!!*/

.Archive article.sumou {
	background-color: ghostwhite;
}
img.sumou_header {
	width: 100%;
	height: auto;
	vertical-align:bottom;
}
.sumou div.subheading {
	line-height: 2;
	background: black;
	color: ghostwhite;
}
.sumou table {
	width: 100%;
	border-collapse: collapse;
	/*font-weight:bold;*/
	table-layout: fixed;
}
.sumou table tr,
.sumou table th,
.sumou table td {
	line-height: 1.7;
	border: solid 1.5px black;
}
.fudemoji {
	font-family: 'aoyagireishosimo';
	font-weight: normal;
}
.sumou table td {
	padding: 10px 0;
}
	.sumou table td.player {
		word-break: keep-all;/* wbr用 */
	}

.hyouki, .gyouji { word-break: auto-phrase; }
.hyouki { margin: 30px auto; }
.gyouji { padding: 0 15px 60px; }

/*!!!!!!!!!!![セラピー]!!!!!!!!!!!*/
.therapy .flexwrap {
	width: 75%;
	margin: 50px auto;
}
	.therapy .flexwrap p {
		margin: 0;
	}
		.therapy .flexwrap p.left_sentence {
			text-align: right;
		}
		.therapy .flexwrap p.right_sentence {
			flex: 1;
		}
.therapy .sentence_foot {
	margin-top: -50px;
}
/*!!!!!!!!!!![ばかやろこのやろ]!!!!!!!!!!!*/
.bakayaro p {
    text-align: center;
}
/*!!!!!!!!!!![天国のお姉ちゃんへ]!!!!!!!!!!!*/
.heaven p {
    font-weight: normal;
}
/*!!!!!!!!!!![いつやるの？ナウでしょ]!!!!!!!!!!!*/
.now h3 {
	margin: 0 auto 20px;
}
	.now br {
		display: none;
	}
	.now .character_blue { color: dodgerblue; }
	.now .character_green { color: green; }
	.now .character_red { color: orangered; }

.now .border_dotted {
	width: 75%;
    display: block;
    border-top: 8px dotted rosybrown;
    margin: 20px auto;
}
.now .sentence_foot {

}
/*!!!!!!!!!!![作詞に挑戦]!!!!!!!!!!!*/
.lyrics01 p {
	text-align: center;
}
.lyrics01 h3 {
	margin: 50px auto;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!(マイコーデ)!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#contents_body.MyCoorde {
	padding: 15px;
	background-color: #fdfdfd;
	text-align: initial;
	font-weight: normal;
}
	.MyCoorde h2 {
		margin-bottom: 15px;
	}

	.MyCoorde #grid-wrap {
		display: grid;
		grid-template-columns: 32% 1fr;
		gap: 15px;
	}
		#grid-wrap .SnapShot {/*width : 560px;height : 315px;*/
		    grid-column: 1;
		}
		#grid-wrap .Details {
		    grid-column: 2;
		}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	/*!!!!!!!!!!!!!(.SnapShot)!!!!!!!!!!!!!!!!*/

	.SnapShot {/*width : 560px;height : 315px;*/
		width : 100%;
		height : auto;
	}
		.SnapShot .comment {
			display: none;
		}

	.swiper-wrapper {/*width : 560px;height : 315px;*/
		width : 100%;
		height : auto!important;
		margin-left: 0!important;
		margin-right: 1em!important;
	}

	.swiper-slide {
		background-size: cover;
		background-position: center;
		cursor: grab;
	}
	.swiper-slide:active {
		cursor: grabbing;
	}
	.swiper-slide img {
		width : 100%;
		height : auto;
		vertical-align: bottom;
	}

	.swiper-pagination {
		position: static!important;
	}
	.swiper-pagination-bullet {
		border-radius: inherit!important;
		margin: 15px 7.5px!important;
		width: 35px!important;
		height: 5px!important;
		/*border-radius: 50% !important;*/
		background: skyblue;
		opacity: 0.19;
	}
	.swiper-pagination-bullet-active {
		background: skyblue;
		opacity: 1;
	}

	/*!!!!!!!!!!!!!!(.Details)!!!!!!!!!!!!!!!!!!*/

	/* gridデザイン用色付け
	.SnapShot {background: tomato;}
	.Details .location {background: skyblue;}
	.Details .location_icon {background: yellowgreen;}
	.Details .equipment {background: yellow;}
	.Details .colouring1 {background: orange;}
	.Details .colouring2 {background: #8f8;}
	.Details .supplement {background: #888;}
	.Details .comment {background: #88f;}
 */
	#grid-wrap .Details {
		display: grid;
		grid-template-rows: repeat(12, auto) 1fr;
		grid-template-columns: repeat(2, auto) 1.5fr repeat(2, 1fr);
		align-items: center;
		gap: 16px 8px;
	}

		.Details .subhead1 {/* row/column */
		    grid-area: 1 / 1;
		}
		.Details .subhead2 {
		    grid-area: 1 / 3;
		}
		.Details .subhead3 {
		    grid-area: 1 / 4;
		}
		.Details .subhead4 {
		    grid-area: 1 / 5;
		}

			.Details .location {
			    grid-column: 1;
			}
			.Details .location_icon {
			    grid-column: 2;
			}
			.Details .equipment {
			    grid-column: 3;
			}
			.Details .colouring1 {
			    grid-column: 4;
			}
			.Details .colouring2 {
			    grid-column: 5;
			}
			.Details .supplement {
				grid-row: 12;
				grid-column: 1 / 6;
			}
			.Details .comment {
				grid-row: 13;
				grid-column: 1 / 6;
			}

	.RH { grid-row: 2; }/* みぎて */
	.LH { grid-row: 3;}/* ひだりて */
	.HE { grid-row: 4; }/* アタマ */
	.BO { grid-row: 5; }/* からだ上 */
	.UB { grid-row: 6; }/* からだ下 */
	.AR { grid-row: 7; }/* ウデ */
	.LE { grid-row: 8; }/* 足 */
	.FA { grid-row: 9; }/* 顔アクセ */
	.FC { grid-row: 10; }/* 顔コーデ */
	.UM { grid-row: 11; }/* かさ */

	.UM.colouring { display: none; }


	/*!!!!!!!!!!.Detailsのgridデザイン用複数スタイル!!!!!!!!!!*/
	
	.MyCoorde h2 {
		line-height: 1.2;
		font-weight: normal;
		text-align: center;
	}

	.Details h2,
	.Details h4,
	.Details h5
	{
		font-weight: normal;
	}
	.Details p, .Details h3, .Details h4, .Details h5, .Details h6
	{
		line-height: 1.65;
	}
	.colouring,
	.supplement {
		display: flex;
	}

	/*.Details p {htmlにwbrつけるとき解除して
		word-break: keep-all;
	}*/


    .Details a:visited:hover {
        color: #E54CCA;
    }
	/*.Details p.clover a {
		position: relative;
	}
		.Details p.clover a::before {直接htmlにimg記述しました
		    content: "";
		    display: block;
		    background: url('images/img_clover.png') center center / 100% 100% no-repeat;
		    position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}*/
.Details p.clover img {
    vertical-align: middle;
	margin-left: 3px;
}
	.Details a {
		color: #333;
	}
	    .Details a:hover, .Details a:visited:hover {
	        color: #E54CCA;
	    }
	.Details h3 {
		width: fit-content;
		border-bottom: 2px solid #333;
	}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.location_icon {
	    display: block;
	}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.colouring {
	    align-items: center;
	    gap: 0px 8px;
	}
	.colouring .color_box {
	    display: block;
	    position: relative;
	    border: 1px solid gray;
	}
		.color_box.no-color {
			border: 1px solid gray;
			background: none;
		}
		.color_box.no-color::before {
		    content: "";
		    display: block;
		    width: calc(1.1vw * sqrt(2) );
		    height: 1px;
		    background: gray;
		    transform: rotate(-45deg);
		    position: absolute;
		    top: 48%;
		    left: -27%;
		}
		.color_box.gloss {
		    border: none;
		}
		.color_box.gloss::before {
		    content: "";
		    display: block;
		    background: url('images/img_gloss.png') center center / 100% 100% no-repeat;
		    position: absolute;
		    top: -10%;
		    left: -10%;
		}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.supplement {
		justify-content: center;
	}
		.supplement > div {
			margin: 0 15px;
		}
			.supplement img {
			    display: inline-block;
			    vertical-align: middle;
			}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.comment {
	    text-align: center;
	}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.MyCoorde h6 {
	margin: 50px 0 -25px;
}

.MyCoorde .coorde_index {
	box-shadow: none;
	margin-bottom: 0;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* ホバー線のスタイル */
.Details a {
  position: relative;
}
	.Details a::after {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  content: '';
	  width: 100%;
	  height: 2px;
	  background: #333;
	  transform: scale(0, 1);
	  transform-origin: center top;
	  transition: transform .3s;
	}
	.Details a:hover::after {
	  transform: scale(1, 1);
	}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!(冒険日誌Topハート)!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#animated-example {
    text-align: center;
    margin-top: -50px;
}
#animated-example a.heart {
	display: inline-block;
	width: 175px;
}
	#animated-example a.heart:hover {
		animation-play-state: running;
		animation-delay: 0s;
	}
	#animated-example a.heart img{
		width: 100%;
		height: auto;
	}
.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: 1;
	animation-play-state: paused;
}
@keyframes swing {
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    60% { transform: rotate(0deg); }
    70% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    90% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
.swing {
    transform-origin: top center;
    animation-name: swing;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*タップ時のハイライトを表示←？？
	#contents {
		-webkit-tap-highlight-color: initial;
		tap-highlight-color: initial;
	}*/
	#contents .coorde_index li a {
		  -webkit-tap-highlight-color:rgba(0,0,0,0);
		  cursor:pointer;
	}
*:focus {
  outline: none;
}

	#contents a.heart {/* タップ時の青いハイライト非表示https://www.memory-lovers.blog/entry/2020/01/27/180000 */
	  -webkit-tap-highlight-color:rgba(0,0,0,0);
	  cursor:pointer;
  	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( Z-INDEX指定 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	/*!!!!!!!!!!.TopPage!!!!!!!!!!!!*/
	/*!!!!!!!!!!.TopPage!!!!!!!!!!!!*/
	/*!!!!!!!!!!.TopPage!!!!!!!!!!!!*/

	.TopPage h2 {/* タグデザイン */
		font-size: 1.125rem; /* 18px */
	}
		.TopPage .label_skitter p {
			font-size: 1.125rem; /* 18px */
		}
		.hover-mask-column {
			font-size: clamp(0.625rem, 5vw, 1.25rem);/* 20px */
		}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*!!!!!!!!!!(アーカイブ)!!!!!!!!!!!!*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.Archive h3 {/* .now .lyrics01 */
		font-size: 1.375rem; /* 22px */
	}
		.sentence_head h2 {/* 日誌タイトル */
			font-size: clamp(0.625rem, 8vw, 2rem);/* 32px */
		}
		.sentence_body p {
			font-size: 1.125rem; /* 18px */
		}

	/*!!!!!!!!!!![セラピー]!!!!!!!!!!!*/

	.therapy .flexwrap p.left_sentence {
		width: 7.875rem;/* ＜アレックス＞7文字分 */
	}

	/*!!!!!!!!!!![相撲]!!!!!!!!!!!*/
	.fudemoji {
		font-size: clamp(0.625rem, 7vw, 1.75rem);/* 28px */
	}
		.sumou td.player, .sumou td.hoshitori {
			font-size: clamp(0.625rem, 4vw, 1rem);/* 16px */
		}
			.sumou td.kimarite {
				font-size: 1.125rem; /* 18px */
			}
				.sumou .subheading, .hyouki p, .gyouji p {
					font-size: 1rem;     /* 16px */
				}


	/*!!!!!!!!!!![いつやるの？ナウでしょ]!!!!!!!!!!!*/

	/*!!!!!!!!!!![作詞に挑戦]!!!!!!!!!!!*/

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*!!!!!!!!!!(マイコーデ)!!!!!!!!!!!!*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.MyCoorde h2 {
		font-size: 1.75rem;  /* 28px */
	}
	.Details h3, .Details h4, .Details p {
		font-size: clamp(0.625rem, 4vw, 1rem);/* 16px */
	}
		.Details .colouring p {
			font-size: clamp(0.625rem, 4vw, 1rem);/* 16px */
		}
	.comment h5,
	.comment p,
	.MyCoorde h6 {
		font-size: 1.125rem; /* 18px */
	}
	.supplement {
		font-size: 1rem;     /* 16px */
	}
	.location_icon,
	.Details p.clover img,
	.supplement img,
	.colouring .color_box,
	.colouring .color_box.gloss::before {
	    width: 20px;
	    height: 20px;
	}
		.Details p.clover a::before {
		    right: calc(-20px + -3px);
		}
		.color_box.no-color::before {
		    width: calc(20px * sqrt(2) );
		}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {

	.Details .comment/*, .Details .location, .Details .subhead1*/ {
		display: none;
	}
	.SnapShot .comment {
		display: initial;
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */

/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {

	.Details .comment, .Details .location, .Details .subhead1 {
		display: none;
	}
	.SnapShot .comment {
		display: initial;
	}

/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {

	.MyCoorde #grid-wrap {
		display: grid;
		grid-template-columns: 40% 1fr;
	}

		.Details .comment {
			display: none;
		}
		.SnapShot .comment {
			display: initial;
		}

	#grid-wrap .Details {
		grid-template-rows: repeat(20, auto) auto 1fr;
		grid-template-columns: auto auto 1fr 1fr;
		align-items: center;
		gap: 8px 8px;
	}

			.Details .location {
			    grid-column: 1;
			}
			.Details .location_icon {
			    grid-column: 2;
			}
			.Details .equipment {
			    grid-column: 3 / 5;
			}
			.Details .colouring1 {
			    grid-column: 3;
			}
			.Details .colouring2 {
			    grid-column: 4;
			}
			.Details .supplement {
				grid-row: 21;
				grid-column: 1 / 5;
			}
			/*.Details .comment {
				grid-row: 22;
				grid-column: 1 / 5;
			}*/

	.RH.location, .RH.location_icon, .RH.equipment { grid-row: 1; }
	.RH.colouring { grid-row: 2; }
	.LH.location, .LH.location_icon, .LH.equipment { grid-row: 3; }
	.LH.colouring { grid-row: 4; }
	.HE.location, .HE.location_icon, .HE.equipment { grid-row: 5; }
	.HE.colouring { grid-row: 6; }
	.BO.location, .BO.location_icon, .BO.equipment { grid-row: 7; }
	.BO.colouring { grid-row: 8; }
	.UB.location, .UB.location_icon, .UB.equipment { grid-row: 9; }
	.UB.colouring { grid-row: 10; }
	.AR.location, .AR.location_icon, .AR.equipment { grid-row: 11; }
	.AR.colouring { grid-row: 12; }
	.LE.location, .LE.location_icon, .LE.equipment { grid-row: 13; }
	.LE.colouring { grid-row: 14; }
	.FA.location, .FA.location_icon, .FA.equipment { grid-row: 15; }
	.FA.colouring { grid-row: 16; }
	.FC.location, .FC.location_icon, .FC.equipment { grid-row: 17; }
	.FC.colouring { grid-row: 18; }
	.UM.location, .UM.location_icon, .UM.equipment { grid-row: 19; }
	.UM.colouring { grid-row: 20; }

	.MyCoorde #grid-wrap {
	    gap: 10px;
	}

	.Details .subhead, .Details .location { display: none; }

	.supplement {
		display: block;
		text-align: right;
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */


/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

	.Details .comment, .Details .location, .Details .subhead1 {
		display: none;
	}
	.SnapShot .comment {
		display: initial;
	}

} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */


/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {


	/*!!!!!!!!!!.TopPage!!!!!!!!!!!!*/
	/*!!!!!!!!!!.TopPage!!!!!!!!!!!!*/
	/*!!!!!!!!!!.TopPage!!!!!!!!!!!!*/

	.diary_index a {
		width: calc(100% / 2);
	}
	.coorde_index li {
	    width: calc(100% / 3);
    }



	/*!!!!!!!!!!![セラピー]!!!!!!!!!!!*/

	.therapy .flexwrap {
		width: 75%;
		display: block;
		margin: 50px auto;
	}
	.therapy .flexwrap p.left_sentence {
	    text-align: left;
	    width: initial;
	}
	.therapy .sentence_body p {
	    width: 100%;
    }
	/*!!!!!!!!!!![いつやるの？ナウでしょ]!!!!!!!!!!!*/

	.now br {
		display: initial;
	}

	/*!!!!!!!!!!.MyCoorde!!!!!!!!!!!!*/
	/*!!!!!!!!!!.MyCoorde!!!!!!!!!!!!*/
	/*!!!!!!!!!!.MyCoorde!!!!!!!!!!!!*/

	.Details .location, .Details .subhead1 {
		display: none;
	}

	.MyCoorde #grid-wrap {/* .SnapShotと.Detailを縦に配置 */
		display: block;
	}
    .SnapShot {
        width: 60%;
    }

	#contents_body.MyCoorde {
	    padding: 20px 5px;
	}

	.location_icon {
	    width: 5vw;
	    height: 5vw;
	}
	.Details p.clover img,
	.supplement img,
	.colouring .color_box,
	.colouring .color_box.gloss::before {
	    width: 4.5vw;
	    height: 4.5vw;
	}
		.Details p.clover a::before {
		    right: calc(-4.5vw + -3px);
		}
		.color_box.no-color::before {
		    width: calc(4.5vw * sqrt(2) );
		}

	.supplement {
		display: block;
		text-align: right;
	}


} @media screen and (width <= 480px) and (orientation: portrait) {


} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */


} @media screen and (width <= 320px) and (orientation: portrait) {

	/*!!!!!!!!!!.MyCoorde!!!!!!!!!!!!*/
	/*!!!!!!!!!!.MyCoorde!!!!!!!!!!!!*/
	/*!!!!!!!!!!.MyCoorde!!!!!!!!!!!!*/





}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/





/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

@media (hover: hover) {

	.hover-mask-column {/* figcaption */
		transform: rotate(90deg) scale(0);
	}
		.hover-parent:hover .hover-mask-column {
			transform: rotate(360deg) scale(1);
		}

}

/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

	.hover-mask-column {/* figcaption */
		transform: rotate(360deg) scale(1);
	}

}