@charset "utf-8";
/*
Theme Name: Tea Break
Theme URI: https://sadou.club/
Description: 茶道教室と会員制予約システム
Version: 0.85
Author: Hasegawa Design Office
*/

/*********************************************************************/
:root {
	--my-site-color: #97C720;/*　メインカラー */
	--my-primary-color: #F0F6E1;/*　メインカラー */
	--my-primary-pale: #FCFDF9;/*　メインカラー */
	--my-primary-dark: #618606;/*　メインカラー */
	--my-sub-color: #E8F1D1;/*　サブカラー */
	--lesson-cat-color-1: #97C720;/*　サブカラー */
	--lesson-cat-color-2: #666;/*　サブカラー */
	--lesson-cat-color-3: #25ACD0;/*　サブカラー */
	--lesson-cat-color-4: #A1CBED;/*　サブカラー */
	--lesson-cat-color-5: #C9BC9C;/*　サブカラー */
	--lesson-cat-color-6: #F7C9DD;/*　サブカラー */
	--lesson-cat-color-7: #F39800;/*　サブカラー */
	--lesson-cat-color-8: #A40B5D;/*　サブカラー */
	--lesson-cat-color-9: #006934;/*　サブカラー */
}

/*********************************************************************/
/* clearfix */
.clearfix::after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    clear: both;
}

/*********************************************************************/
/* Fonts */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('fonts/LigatureSymbols-2.11.eot');
    src: url('fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
	url('fonts/LigatureSymbols-2.11.woff') format('woff'),
	url('fonts/LigatureSymbols-2.11.ttf') format('truetype'),
	url('fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('fonts/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Monika';
    src: url('fonts/Monika.eot');
    src: url('fonts/Monika.eot?#iefix') format('embedded-opentype'),
	url('fonts/Monika.woff') format('woff'),
	url('fonts/Monika.ttf') format('truetype'),
	url('fonts/Monika.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ampersandregular';
    src: url('fonts/ampersand-webfont.woff2') format('woff2'),
	url('fonts/ampersand-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'sosho';
    src: url('fonts/sosho.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'tegaki';
    src: url('fonts/TekitouPoem.woff') format('woff'),
		 url('fonts/TekitouPoem.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway';
    src: url('fonts/raleway-light-webfont.woff') format('woff'),
    url('fonts/raleway-light-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
    font-family: 'LigatureSymbols';
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-size: 1.5em;
}
.lsf-icon::before {
    content: attr(title);
    margin-right: 0.3em;
}

.smartphone, .smartphone-icon:before {
}
.smartphone-icon::before {
}

/*///////////////////////////////////////////////////////////////////////
 Base Tags
///////////////////////////////////////////////////////////////////////*/
html { 
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

html, body {
    height: 100%;
    font-size: 11pt;
}
body, pre {
    font-family: 'EB Garamond', “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
	font-weight: 400;
	font-style: normal;
}
body {
	position: relative;
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
    color: #333;
    line-height: 1.69em;
    word-wrap: break-word;
	text-align: justify;
	text-justify: inter-ideograph;
}


* {
	box-sizing: border-box;
	transition: .5s;
}
*:hover {
	transition: .5s;
}

P { 
	font-size: 1em; 
	line-height: 1.69em;
}


u {
	text-decoration: underline; /* デフォルトと同じ */
	text-decoration-color: var(--my-site-color); /* 下線の色を赤に */
	text-decoration-style: wavy; /* 波線に */
	text-decoration-thickness: 1px; /* 線の太さ */
	text-underline-offset: .2em;
}

/* -- img -- */
img {
    margin: 0px;
    padding: 0px;
    border-style: none;
}
/* -- a -- */
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: var(--my-site-color);
}
a span {
	display: none;
}

/* -- h -- */
H1, H2, H3 {
	font-feature-settings: "palt";
}

H1 {
	margin-top: 2em;
}

UL {
	padding-left: 0;
}

LI {
	list-style: none;
	margin-bottom: .5em;
}

table {
	max-width: 95vw!important;
}

tr, th, td {
	padding: .5em 1em;
}

caption span {
	font-size: .8em;
	font-weight: 300;
}


/**********************************************************************
 footer
***********************************************************************/
footer {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 1em;
	margin-top: auto;
}

footer #logo {
	width: 135px;
	height: 27px;
	margin-top: .25em;
	background-image: url("parts/img/logo.svg");
}

footer a {
	display: block;
}

footer ADDRESS { 
	display: flex;
	justify-content: center;
	font-style: normal;
	font-size: .75em;
	margin: 1em auto;
	line-height: 1.5em;
	max-width: 95vw;
}

footer ADDRESS DIV.address {
	border-left: 1px solid #333;
	border-top: none!important;
	margin-left: 1em;
	padding-left: 1em;
	text-align-last: left!important;
}
footer small{
    display: block;
    text-align: center;
}

.grecaptcha-badge { visibility: hidden; }

footer .recaptcha-note {
	color: #AAA;
	font-size: .6em;
	font-family: Verdana, Geneva, "sans-serif";
	text-align: center;
	margin: 0 auto;
}

footer .recaptcha-note a {
	display: inline;
	color: #999;
}

/***********************************************************************/

section#contents {
	width: 100%;
}

main#single {
	margin: auto;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
スマホ
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 743px) {

	.smartphone, .smartphone-icon:before {
		font-family: 'LigatureSymbols';
		-webkit-text-rendering: optimizeLegibility;
		-moz-text-rendering: optimizeLegibility;
		-ms-text-rendering: optimizeLegibility;
		-o-text-rendering: optimizeLegibility;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-ms-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		font-smoothing: antialiased;
		font-size: 2em;
		line-height: 1em;
	}

	header .wrapper {
		height: 75px;
	}
	header .wrapper, main {
		width: 95vw;/*border: 1px solid orange;*/
	}
	
	header #logo {
		width: 50px!important;
		height: 50px!important;
	}
	
	header nav {
		font-size: .9em;
	}
	header nav#menu UL {
		width: 80vw;
		margin: auto!important;
		flex-direction: column!important;
		justify-content: center!important;
		align-items: center;
	}
	
	nav#menu UL LI {
		display: flex;
		justify-content: center;
		background: none;
		width: 100%;
		font-size: 1.25em;
		padding: .25em 0!important;
	}
	
	nav#menu UL LI a {
		display: block;
		text-align: center;
		width: 100%!important;
		background: #D7E7AF;
		border-radius: .5em;
		padding: .5em 0;
		margin: .5em auto;	
	}
	
	header nav ul li:hover {
		text-decoration: none;
	}
	header nav ul li.active:hover {
		background-color: transparent!important;
	}
		
	header nav #logout {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		font-size: 1rem!important;
	}
	
	header nav LI#logout a {
		color: #FFF;
		background: #333;
		font-size: .8em!important;
	}
	
	header nav LI#logout a:hover {
		background: var(--my-site-color);
		color: #FFF!important;
	}
	
	.hamburger {
		position: fixed;
		right: 20px;
		top: 20px;
		width: 30px;
		height: 21px;
		cursor: pointer;
	}
	
	.hamburger.update::before {
		content: '●';
		position: absolute;
		top: -.5em;
		left: -.5em;
		font-size: 1.5em;
		color: red;
		-webkit-animation:blink .75s ease-in-out infinite alternate;
		-moz-animation:blink .75s ease-in-out infinite alternate;
		animation:blink .75s ease-in-out infinite alternate;
		mix-blend-mode: multiply;
	}
	
    .hamburger__line{
		position: absolute;
		width: 30px;
		height: 3px;
		background-color: #333333;
		border-radius: 2px;
		transition: all 300ms ease;
		transform: rotate(0deg);
    }   
    /* 線の位置（通常） */
    .hamburger__line:nth-child(1) { top: 0px; }
	.hamburger__line:nth-child(2) { top: 9px; }
	.hamburger__line:nth-child(3) { top: 18px; }
	
	.hamburger__line:nth-child(2)::after {
		content: 'menu';
		display: block;
		margin-top: 9px;
		text-align: center;
		font-family: "Courier New", Courier, "monospace";
		font-weight: bold;
		font-size: 12px;
		top: 0;
	}

    
    /* ×変形（3本） */ 
    .hamburger.open .hamburger__line:nth-child(1) {
		top: 9px;
		transform: rotate(45deg);
    }
    .hamburger.open .hamburger__line:nth-child(2) {
		opacity: 0;
    }
    .hamburger.open .hamburger__line:nth-child(3) {
		top: 9px;
		transform: rotate(-45deg);
    }
    
    /* メニュー本体 */
    .menu {
		position: fixed;
		top: 50px;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-2em);
		transition: all 300ms ease;
		width: 100%;
		height: calc( 100vh - 50px );
		background-color: rgba(250,250,250,.95);
		color: #333333;
		padding: 1em;
		gap: 1em;
    }
    
    .menu.open {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }
    
    .menu__item {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      font-size: 16px;
      color: inherit;
      padding-bottom: 10px;
      border-bottom: 1px solid #cccccc;
    }
    .menu__item:last-child {
      border-bottom: none;
    }
  
    /* 上から下 */
    .slide-top-enter-active,
    .slide-top-leave-active {
      
          transition: all 300ms ease;
        
    }
    .slide-top-enter-from,
    .slide-top-leave-to {
      opacity: 0;
      transform: translateY(-20px);
    }
    .slide-top-enter-to,
    .slide-top-leave-from {
      opacity: 1;
      transform: translateY(0);
    }
	
	header nav .avatar {
		position: relative;
		width: 5em;
		height: 5em;
		top: auto;
		right: auto;
		margin: 0 auto;
	}
	
	header nav ul a,
	header nav ul li.active{
		display: inline-block;
		margin: 0 .2em 0 0;
		padding: .25em .5em 0 .5em;
		border-radius: .25em .25em 0 0;
	}
	
	header nav ul li.active{
		border-radius: .5em .5em 0 0;
	}
	
	header nav ul li.unread::before {
		content: '●';
		position: absolute;
		top: 1em;
		left: .5em;
		font-size: .75em;
	}
	
	header nav ul a span:first-child {
		display: none!important;
	}
	header nav ul a span:last-child {
		display: inline-block!important;
	}
	
	main {
		margin-top: 1em;
	}
	
	main#single {
		width: 90vw;
	}
	main#single table {
		width: 100%;
	}
	main#single table td{
		padding: .25em .5em;
	}
	#member_mypage {
		flex-direction: column;
		justify-content: flex-start;
	}
	#member_mypage section:first-of-type,
	#member_mypage section:last-of-type {
		width: 100%;
	}
	
	article#headlines section {
		width: 100%!important;
		margin: 2em auto!important;
	}	
	
	/*メンバーズカード*/
	#members-card {
		width: 95vw;
		height: calc(95vw * 0.635);
		max-width: 425px;
		max-height: 270px;
	}
	
	/*メンバーズカード*/
	main#member_note {
		flex-direction: column;
		justify-content: flex-start;
	}
	#members-card .card-front h1 {
		font-size: 1em;
	}
 	
	#member_note.for-instructor .left,
	#member_note #personal-data,
	#lesson-notes {
		width: 100%;
	}

	.graph-wrap {
		width: 50%;
		height: 50%;
	}
	
	/* しおり　*/

	body#instruction dl {
		margin-left: 0!important;
	}
	
	body#instruction dd {
		margin-left: 1em;
	}

	body#instruction table caption {
		text-align: left;
	}	
	
	/*wp-mem 登録・パスワード変更ボタン*/
	#profile section nav li {
		width: 90vw;
		text-align: center;
	}
	
}