/*
 Theme Name:   KOKOROnoKATATI Theme
 Theme URI:    https://kokoronokatati.ty-net.net/liquid-light-kokoronokatati-child/
 Description:  KOKOROnoKATATi child-Theme
 Author:       T-NET Internet Service
 Author URI:   https://www.ty-net.net/
 Template:     liquid-light
 Version:      1.0.989
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  liquid-light-kokoronokatati-child

 This theme, like WordPress, is licensed under the GPL.
*/
/* ------------------------------------
// Debug
------------------------------------ */
.YFont-check {
	position: relative;
	display: none;
	/* display: inline; */
}

/* ------------------------------------
// COMMON
------------------------------------ */
:root {
}

@font-face {
	font-family: 'Noto Sans JP';
	src: local('NotoSansJP'),
		 url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff') format('woff');
	font-style: normal;
	font-weight: 900;
}

/* IE11 Onry */
@media all and (-ms-high-contrast: none) {
	html {
		font-size: 15px; /* ルート要素にremの基準となるサイズを指定 */
	}
	h1 {font-size: 3rem;margin: 0px;} /* h1-h6はこの位置で設定すること */
	h2 {font-size: 2.5rem;margin: 0px;}
	h3 {font-size: 2rem;margin: 0px;}
	h4 {font-size: 1.5rem;margin: 0px;}
	h5 {font-size: 1rem;margin: 0px;}
	h6 {font-size: 0.7rem;margin: 0px;}
}

/* IE */
_:-ms-lang(x)::-ms-backdrop, body {
}

/* Firefox */
@-moz-document url-prefix {
}

/* Edge / Chrome / Safari / Opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	html {
		font-size: 15px; /* ルート要素にremの基準となるサイズを指定 */
	}
	h1 {font-size: 3rem;margin: 0px;} /* h1-h6はこの位置で設定すること */
	h2 {font-size: 2.5rem;margin: 0px;}
	h3 {font-size: 2rem;margin: 0px;}
	h4 {font-size: 1.5rem;margin: 0px;}
	h5 {font-size: 1rem;margin: 0px;}
	h6 {font-size: 0.7rem;margin: 0px;}
}

/* Opera10以上 */
@media not screen and (1) {
}

/* ------------------------------------
// Bootatrap
------------------------------------ */
.container {
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 2rem!important;
}
.card-group {
}
.card-header {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
}
.card-title {
}
.card-subtitle {
}
.card-text {
}
.card-link {
}
.card-img-top {
}
.card-img-bottom {
}
.card-footer {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* /Bootstrap                        */
/* ------------------------------------
// LIQUID PRSS
------------------------------------ */
/* ------------------------------------
// common
------------------------------------ */
body {
	width: 100%;
	height: 100%;
/*	margin: 0;
	padding: 0;
	border: none; */
	font-family: 'Noto Sans JP';
}
.wrapper {
    overflow: hidden;
}

a {
    color: #00aeef;
    text-decoration: none;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
}

a:hover,
a:active {
    color: #00aeef;
    text-decoration: underline;
}

a:visited {
    color: #00aeef;
    opacity: 0.7;
}

/*画像の最大幅を画面のサイズの最大幅に設定*/
img {
	max-width: 100vw;
	height: auto;
}

.headline {
	display: none;
}

.navbar {
	display: none;
}

.sidebar {
	background-color: rgba(255, 255, 255, 0.1);
}

hr {
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #fff;
	box-sizing: center-box;
	height: 0;
	overflow: visible;
	text-align: inherit;
	margin: 0 0 20px 0;
	border: 0;
	border-top: 1px solid #e5e5e5;
}

/* /LIQUID PRESS: NO Modify          */
/* ------------------------------------
// PAGE-ONE
------------------------------------ */
#PAGE-ONE {
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	/* position: absolute; */
	position: fixed;
}
.YPage-one--modify {
	background-position: bottom calc(100vh / 3) right 0rem;
}
/* ------------------------------------
// K2RO3-HEADER
------------------------------------ */
#k2ro3HEADER {
}

/* /k2ro3HEADER                      */
/* ------------------------------------
// k2ro3-COVER
------------------------------------ */
#k2ro3COVER {
	width: 100vw;
	/* background-repeat: no-repeat; */
}

.k2ro3COVER--modify {
	height: 100vh;
}

/* /k2ro3COVER                       */
/* ------------------------------------
// K2RO3-TOPIC
------------------------------------ */
/* ブロック： k2ro3TOPIC             */
#k2ro3TOPIC {
}

.k2ro3TOPIC__katati {
}
.k2ro3TOPIC__manual {
}
.k2ro3TOPIC__bbs {
}
/* /k2ro3TOPIC                       */
/* ------------------------------------
// K2RO3-SevenStory
------------------------------------ */
/* ブロック： k2ro37STORY            */
#k2ro37STORY {
	background-color:  #FFF;
}
/* /k2ro37STORY                      */
/* ------------------------------------
// K2RO3-WEATHER
------------------------------------ */
/* ブロック： k2ro3WEATHER           */
#k2ro3WEATHER {
}
/* /k2ro3WEATHER                     */
/* ------------------------------------
// K2RO3-WEATHER2
------------------------------------ */
/* ブロック： k2ro3WEATHER2          */
#k2ro3WEATHER2 {
	border-left: 1px solid #e5e5e5;
}
/* /k2ro3WEATHER2                    */
/* ------------------------------------
// K2RO3-MAIN
------------------------------------ */
/* ブロック： k2ro3MAIN              */
#k2ro3MAIN {
}
.k2ro3MAIN--modify {
}

/* /k2ro3MAIN                        */
/* ------------------------------------
// K2RO3-MAIN2
------------------------------------ */
/* ブロック： k2ro3MAIN2             */
#k2ro3MAIN2 {
}
.k2ro3MAIN3--modify {
}

/* /k2ro3MAIN2                       */
/* ------------------------------------
// K2RO3-MAIN3
------------------------------------ */
/* ブロック： k2ro3MAIN3             */
#k2ro3MAIN3 {
}
.k2ro3MAIN3--modify {
}

/* /k2ro3MAIN3                       */
/* ------------------------------------
// K2RO3-SIDEBAR
------------------------------------ */
/* ブロック： k2ro3SIDEBAR           */
#k2ro3SIDEBAR {
}

/* /k2ro3SIDEBAR                     */
/* ------------------------------------
// K2RO3-MEMBER-INFO
------------------------------------ */
/* ブロック： k2ro3MEMBER-INFO       */
#k2ro3MEMBER-INFO {
}

/* /k2ro3MEMBER-INFO                  */
/* ------------------------------------
// K2RO3-MYQR
------------------------------------ */
/* ブロック： k2ro3MYQR              */
#k2ro3MYQR {
}

/* /k2ro3MYQR                        */
/* ------------------------------------
// K2RO3-OPEN-QR
------------------------------------ */
/* ブロック： k2ro3OPEN-QR            */
#k2ro3OPEN-QR {
}

/* /k2ro3OPEN-QR                      */
/* ------------------------------------
// K2RO3-STICKER
------------------------------------ */
/* ブロック： k2ro3STICKER           */
#k2ro3STICKER {
}

/* /k2ro3STICKER                     */
/* ------------------------------------
// K2RO3-FOOTER
------------------------------------ */
/* ブロック： k2ro3FOOTER            */
#k2ro3FOOTER {
}

/* /k2ro3FOOTER                      */
/* ------------------------------------
// Mask or Box
------------------------------------ */
/* ブロック： Mask(n) or Box(n)      */
.XMask0 {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 2rem;
		background-color: #FFF;
		opacity: 0.4;
}
.XMask1 {
	top: 0px;
	left: 0px;
	width: 100vw;
	height: calc(100vh / 3);
	background-color: #FFF;
	position: absolute;
	display: inline;
}
.XMask2 {
	top: calc((100vh / 3) + 0.5rem);
	left: 0px;
	width: 100vw;
	height: 0.4rem;
	background-color: #FFF;
	position: absolute;
	display: inline;
}
.XMask3 {
	width: 100vw;
	height: auto;
	padding-bottom: 1rem;
	position: relative;
	background-color:  #FFF;
}
.Box00 {
	width: auto;
	text-align: center;
}
.Box01 {
}
.Box02 {
	border: 1px solid #CCC;
	position: relative;
}
/* /Mask(n) or Box(n)                */
/* ------------------------------------
// TEXT Position
------------------------------------ */
/* TEXT Position                     */
.boxhead {
	margin-top: 0!important;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
	padding-top: 1rem;
}

/* /TEXT Position                    */
/* ------------------------------------
// Z-INDEX Position
------------------------------------ */
/* DEBUG Position                    */
.ZDebug-zindex {
	z-index: 200;
}
/* DRAWER Position                 */
.ZDrawer-zindex {
	z-index: 102;
}
.ZDrawer2-zindex {
	z-index: 101;
}
/* INDEX-MENU Position                 */
.ZIndex-menu-zindex {
	z-index: 100;
}
/* MEMBER-HEADER Position            */
.ZMember-header-zindex {
	z-index: 89;
}
/* TOP-HEADER Position               */
.ZTop-header-zindex {
	z-index: 88;
}
/* COVER Position               */
.ZCover-zindex {
	z-index: 1;
}
.ZCover2-zindex {
	z-index: 10;
}
/* Mask(n) Position                  */
.ZMask-zindex {
	z-index: -50;
}
/* BACKGROUND-IMAGE Position         */
.ZBackground-zindex {
	z-index: -100;
}

/* /Z-INDEX Position                 */
/* ------------------------------------
// ELEMENTS , SECTION
------------------------------------ */
/* はじめに： First                  */
.YFirst {
	position: fixed;
	top: 0rem;
	left: 2rem;
	opacity: 1.0;
}
.YSignatureIn {
	position: fixed;
	top: 0.5rem;
	right: 2rem;
	opacity: 1.0;
}
.YInfoDispray {
	top: calc(100vh / 2 - 1rem);
	right: calc(100vw / 3 - 4rem);
	position: absolute;
	text-shadow: orange 0px 0px 20px;
}
.YKokoroMenu {
	top: calc(100vh / 3 * 2 + 0.3rem);
	left: calc(100vw / 5 * 3);
	position: absolute;
}
.YKokoroChar {
	position: absolute;
	top: calc(100vh - 268px) / 5);
	left: 1.5rem;
	width: calc(100vw - 3rem);
	height: auto;
	opacity: 0.07;
}
.YKokoroChar:hover {
	opacity: 0.3;
}
#IndexMenu {
	top: calc(100vh / 2 - 2rem);
	left: 0rem;
}
.YIndexMenu--modify {
	position: absolute;
	display: none;
}
.XItumoPos {
	position: absolute;
	line-height: 3rem;
	top: calc(100vh / 3 * 2 - 4rem);
	/* left: 3rem; */
	right: calc(100vw / 2);
	text-shadow: darkgray 1px 1px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.YItumoLink {
	position: relative;
}
.YItumoText {
	/* margin-left: 0px;
	margin-right: 0px; */
	position: relative;
}
/* .ItumoText2 {
	padding-top: 8rem;
	position: relative;
	z-index: 11;
} */
.YKokoroLogo00 {
	top: calc(100vh / 3 * 2 - 45px);
	right: 5px;
	position: fixed;
	/* position: absolute; */
}
.YButtonRenewal {
	bottom: 0.5rem;
	right: 0.5rem;
	opacity: 1.0;
	position: absolute;
	display: none;
}
.YButtonRenewal:hover {
	opacity: 0.5;
}
.YCoverFooter {
	bottom: 0.3rem;
	left: 0.2rem;
	position: absolute;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.YQr-code {
	width: 115px;
	padding: 10px;
	float: left;
}
.YSticker {
	width: 150px;
	padding: 10px;
	float: left;
}
.YLinktext {
	bottom: 0.2rem;
}

.YWeatherBox {
	width: 336px;
	height: auto;
}
.YWeatherBox2 {
	width: 21rem;
	height: auto;
}
.XBOX-vartical {
	width: 100%;
	position: relative;
	line-height: 3rem;
	top: 0rem;
	right: 0rem;
	text-shadow: darkgray 1px 1px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.YBOX-vartical-title {
	position: relative;
}
.YBOX-vartical-text {
	margin-right: 0px; */
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ZMain2Display {
	display: inline;
}
.ZMain3Display {
	display: inline;
}
.ZBOX-radius3 {
	border-radius: 3px;
}
/* ------------------------------------
// PatternName
------------------------------------ */
.ZBOX-padding {padding: 1rem!important;}
.ZBOX-margin {margin: 0px auto;}
.ZBOX-height {height: 20rem;}
.ZTEXT-white {color: #fff!important;}
.ZTEXT-bcolor1 {color: #ffa200!important;}
.ZTEXT-bcolor2 {color: #fbdbb8!important;}
.ZTEXT-bcolor3 {color: #ff6000!important;}
.ZTEXT-bcolor4 {color: #e8400c!important;}
.ZTEXT-bcolor5 {color: #ff3a25!important;}
.ZTEXT-bcolor1r {color: #00a2ff!important;}
.ZTEXT-bcolor2r {color: #b8dbfb!important;}
.ZTEXT-bcolor3r {color: #0060ff!important;}
.ZTEXT-bcolor4r {color: #0c40e8!important;}
.ZTEXT-bcolor5r {color: #253aff!important;}
/* /ELEMENT , SECTION                */
/* ------------------------------------
// Bottun
------------------------------------ */
/* ブロック： btn                    */
.btn-flat-border {
	width: 100%;
	/* height: 6rem; */
	display: inline-block;
	/* padding: 0.3em 1em; */
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	text-decoration: none;
	background: #FFF;
	color: #67c5ff;
	/* border: solid 2px #67c5ff; */
	transition: .4s;
	/* -webkit-writing-mode: vertical-rl; */
	/* -ms-writing-mode: tb-rl; */
	/* writing-mode: vertical-rl; */
}

.btn-flat-border:hover {
	background: #67c5ff;
	color: white;
}
.YBtnFlatBorder {
	height: 6rem;
	border-radius: 3px;
	border: solid 2px #67c5ff;
}
.YBtnFlatBorder2 {
	height: auto;
	min-height: 10rem;
	border: solid 1px #a9a9a9;
	background-color: #fffff0
}

.btn-flat-logo {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
	border-radius: 3px;
  text-decoration: none;
  color: #FFF;
  background: #00bcd4;
  transition: .4s;
}

.btn-flat-logo:hover {
  background: #1ec7bb;
}



/* ------------------------------------
// Drawer MENU
------------------------------------ */
/* ブロック： drawer                 */
#drawer-checkbox {
  display: none;
}
/*
#drawer-icon {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  position: relative;
  width: 50px;
}
#drawer-icon2 {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  position: relative;
  width: 50px;
}
#drawer-icon span {
  background:  #333;
  border-radius: 4px;
  display: block;
  height: 16%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease-in-out;
  width: 84%;
}
#drawer-icon span::before,
#drawer-icon span::after {
  -webkit-transform: rotate(0);
  background: #333;
  border-radius: 4px;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 100%;
}
#drawer-icon span::before {
  margin-top: -38%;
}
#drawer-icon span::after {
  margin-top: 19%;
}
#drawer-checkbox:checked ~ #drawer-icon span {
  background: rgba(51, 51, 51, 0);
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
*/
#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: 102; */
  width: 250px;
  max-width: 90%;
  height: 100%;
  background: #fff;
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(-100%);
}
#drawer-checkbox:checked ~ #drawer-content {
  transform: translateX(0);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.16);
}

#drawer-close {
  display: none;
  position: fixed;
  /* z-index: 101; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
  display: block;
  opacity: 0.3;
}
/* /Drawer MENU                      */
/* ------------------------------------
// Drawer MENU
------------------------------------ */
/* ブロック： DRAWER                 */

/* /Drawer MENU                      */
/* ------------------------------------
// @media
------------------------------------ */

.aisatsu {display: none;}
.supikai {display: none;}
.qrcode  {display: none;}
.sticker {display: none;}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	
	.container {
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.YPage-one--modify {
		background-position: bottom 0px right 0px;
		position: fixed;
	}
	.container {
	}
	
	.YFirst {
	}
	.YSignatureIn {
	}
	.XMask1 {
		display: none;
	}
	.XMask2 {
		display: none;
	}
	.btn-flat-border {
		width: 100%;
		height: 3rem;
		/*
		display: inline-block;
		padding: 0.3em 1em;
		text-decoration: none;
		color: #67c5ff;
		border: solid 2px #67c5ff;
		border-radius: 3px;
		transition: .4s;
		*/
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.YInfoDispray {
		right: calc(100vw / 2 - 4rem);
		font-size: 1.3rem;
	}
	.YKokoroMenu {
		display: none;
	}
	.YKokoroChar {
		top: calc((100vh - 268px) / 2);
		opacity: 0.1;
	}
	.YIndexMenu--modify {
		position: fixed;
		display: inline;
	}
	.XItumoPos {
		position: static;
		width: calc(100vw * 0.65);
		margin-right: auto;
		margin-left: auto;
		/* display: inline; */
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.YItumoLink {
		font-size: 1rem;
		bottom: 0.15rem;
		right: calc(100vw / 2 - 5rem);
		position: absolute;
	}
	.YItumoText {
		position: relative;
	}
/*	.ItumoText2 {
		padding-top: 0rem;
		padding-left: 12rem;
		position: relative;
		z-index: 11;
	} */
	.YKokoroLogo00 {
		display: none;
	}
	.YButtonRenewal {
		display: inline;
	}
	.XBOX-vartical {
		height: auto;
		position: relative;
		width: calc(100vw * 0.7);
		margin-right: auto;
		margin-left: auto;
		/* display: inline; */
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.YBOX-vartical-title {
		position: relative;
	}
	.YBOX-vartical-text {
		position: relative;
	}
	.ZMain2Display {
		display: inline;
	}
	.ZMain3Display {
		display: inline;
	}
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.container {
	}
	.YFirst {
		left: 0.5rem;
	}
	.YSignatureIn {
		right: 0.5rem;
	}
	.YCoverFooter {
		bottom: 0.15rem;
		left: 0.2rem;
		font-size: 0.6rem;
	}
	.Box02 {
	}
	.YQr-code {
		padding: 10px;
	}
	.YSticker {
		padding: 10px;
	}
	.YLinktext {
		font-size: 1rem;
	}
}