@charset "utf-8";
/*
Theme Name: Sadou Club
Theme URI: https://sadou.club/
Description: The original theme for Hasegawa Design Office
Version: 0.25
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, body {
    height: 100%;
}
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;
    font-size: 11pt;
    color: #333;
    line-height: 1.69em;
    word-wrap: break-word;
	text-align: justify;
	text-justify: inter-ideograph;
}


* {
	box-sizing: border-box;
}

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

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

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

H1 {
	margin-top: 2em;
}

/*///////////////////////////////////////////////////////////////////////
 Layout 
///////////////////////////////////////////////////////////////////////*/

/*#wrapper,header,#wrapper,header #logo,header .wrapper, header nav  {
    border: 1px solid blue;
}*/

/*全体を包む*/
#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/*mainを包む*/
section#contents {
	position: relative;
	background-color: #FFF;
}

/**********************************************************************
 header 
***********************************************************************/
header {
	position: relative;
	width: 100%;
	z-index: 1000;
	/*background-color: var(--my-primary-color);*/
}
header .wrapper {
	height: 100px;
    display: flex;
	flex-direction: column;
	align-items: flex-start;
    justify-content: space-between;
	/*幅はレスポンシブで指定*/
	margin: 0 auto;
}


header #logo, footer #logo {
    display: block;
	background-size: contain;
	background-repeat: no-repeat;
    mix-blend-mode: multiply;
}

header #logo {
	background-image: url("parts/img/logo-simbol.svg");
}

header #logo {
	width: 35px;
	height: 35px;
	margin: 1em 0;
}


li .lsf-icon.logout:before  {
	content: '\E087';
    font-size: .9em;
}

a.lsf-icon.home:before  {
	content: '\E00c';
    font-size: .9em;
}

/**********************************************************************
 トップページ
***********************************************************************/

#cover {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: var(--my-primary-color);
}

#introduction H2,
#introduction H3{
	color: var(--my-site-color);
}

#introduction H3,
#introduction UL,
#introduction section table caption {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


#introduction H3 {
	font-size: 1em;
	margin-top: 2em;
}

#introduction UL {
	width: 300px;
	font-size: .75em;
	text-align: left;
	margin: auto;
}
#introduction UL LI {
	color: var(--my-site-color);
	text-indent: -1em;
	line-height: 1.5em;
}

#introduction hr {
	width: 800px;
	border-top: 1px solid var(--my-site-color);
	max-width: 95vh;
	margin: 1em auto;
}

#introduction section {
	width: 600px;
	max-width: 95vh;
	margin: 5em auto;
	text-align: center;
}


#introduction section table {
	border: 1px solid var(--my-site-color);
	border-radius: .25em;
	background-color: #FFF;
	width: 300px;
	max-width: 95vh;
	margin: 1em auto;
}

#introduction section table caption {
	font-size: .9em;
}

#introduction section tr th,
#introduction section tr td{
	padding: .5em 2em;
}

#introduction section tr th {
	text-align: center;
	border-radius: .25em;
	color:#000;
	background: var(--my-primary-color);
}
#introduction section tr td {
	text-align: right;
}

#introduction section table span {
	display: block;
	margin: auto;
	font-size: .75em;
}

/**********************************************************************
 ログイン
***********************************************************************/



/**********************************************************************
 Contact7
***********************************************************************/

.wpcf7 {
	margin: 2em auto 1em auto;
	mix-blend-mode: multiply;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
    width: 100%!important;
	padding: 0.5em!important;
	margin: 0!important;
	border-radius: .5em;
	box-sizing: border-box!important;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

/* for stickyheader.js */
.fixed{
position: fixed;
top: 0;
left: 0;
	height: 50px;
}
.fixed #emblem {
	height: 50px;
	width: 50px;
}

/**********************************************************************
 404
***********************************************************************/
#notfound {
	text-align: center;
	height: 100%;
}

#notfound P {
	font-size: 1.5em;
	margin: 5em 0;
}

#notfound a {
	display: block;
	width: 150px;
	height: 150px;
	margin: 2em auto;
	background-image: url("parts/img/404sorry.png");
	background-repeat: no-repeat;
	background-size: contain;
	
	
}

/**********************************************************************
 main　基本
***********************************************************************/

main {
    margin: 3em auto;
}
main article {
}


/**********************************************************************
 main for single
***********************************************************************/
main#single {
	width: 600px;
	margin: inherit auto;
}

main .pillar {
	position: relative;
	line-height: 1em;
	font-size: .8em;
	color: #000;
}
main .pillar time {
	display: block;
	text-align: right;
}

main .pillar span {
	color: #333;
}
main .pillar.blog span {
	color: var(--my-primary-dark)!important;
}

main .pillar span:nth-child(1) {
	position: absolute;
	left: -6em;
	top: -1em;
	line-height: 1em;
	padding: 0 0 .1em 6em;
	border-bottom: 1px solid;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: bold;
	font-size: 1em;
	color: #333;
}
main .pillar span:nth-child(2) {
	position: absolute;
	left: 0em;
	top: .75em;
	font-size: .9em;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
main .pillar.blog span:nth-child(1) {
	font-size: 1.2em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
main .pillar.blog span:nth-child(2) {
	font-size: .75em;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

main H1 {
    font-family: 'EB Garamond', “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
	margin-bottom: 2em;
	line-height: 120%;
}
main#single P {
	text-indent: 1em;
}

main#single section.body {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 300;
}

main#single table {
	margin-top: 3em;
	box-sizing: border-box;
	border-collapse:  collapse;
	margin: auto;
}

main#single figure {
	margin: 0;
}

main#single table tr, #scta table td {
	box-sizing: border-box;
	padding: .5em;
	border: 1px solid #EEE;
}
main#single table td{
	padding: .5em 1em;
}
main#single table td:first-child {
	background-color: #FAFAFA;
}

main UL {
    padding: 0;
}
main LI {
    list-style: none;
    margin-left: 0em;
}

main article#single figure img.vertical {
    width: 60%;
}
main article#single figure img.horizontal {
    width: 100%;
}

figcaption {
    color: #666;
    text-align: right;
    font-size: .75em;
    line-height: 1em;
}

/*記事の整形*/
main#single P::after{
	content: '';
	display: block;
	clear: both;
}

main#single figure {
	margin: .5em auto;
	width: fit-content!important;
	height: fit-content!important;
}

main#single figure.aligncenter {
	width: 100%!important;
	text-align: center;
}
main#single figure img {
	width: 100%!important;
	height: auto;
}

main#single figure.alignright,
main#single figure.alignleft {
	width: 50%!important;
}
main#single figure.alignright,
main#single figure.alignleft img {
	width: 50%;
	height: auto;
}
main#single figure.alignright{ margin-left: 1em;}
main#single figure.alignleft{ margin-right: 1em;}

main#single .is-style-rounded img {
	border-radius: 8px;
}

main#single .has-text-align-right {
	text-align: right;
}

/*---- ナビゲーション -------------------------------*/
#post-navigation {
	position: relative;
	width: calc( 600px - 2em );
	max-width: calc( 95vw - 2em );
	margin: 2em auto 4em auto;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

#post-navigation::after{
	content:'';
	display: block;
	clear: both;
}
#post-navigation .home {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 完全中央 */
}

#post-navigation .link {
	font-size: .75em;
}

#post-navigation a.prev{float: left;}
#post-navigation a.next{float: right;}

#post-navigation a.prev::before,
#post-navigation a.next::after{
	font-family: 'LigatureSymbols';
	font-size: 1.5em;
}

#post-navigation a.prev::before { content: "\E080"; margin-right: .5em; }
#post-navigation a.next::after { content: "\E112"; margin-left: .5em; }

/*---- 店舗情報 -------------------------------*/
aside#shop-info {
	display: flex;
	justify-content: flex-end;
	font-size: .75em;
	margin: 3em auto;
}
aside#shop-info::after{
	content: '';
	display: block;
	clear: both;
}

aside#shop-info div {
	width: fit-content;
	border-left: 2px solid #333;
	padding-left: 1em ;
}

aside#shop-info H4 {
	font-size: 1.2em;
	margin: 0 0 .25em 0;
	padding: 0;
}

aside#shop-info div span {
	position: relative;
	display: block;
	line-height: 150%;
	margin-left: 1.25em;
}

aside#shop-info div span::before {
	position: absolute;
	font-family: 'LigatureSymbols';
	left: -1.25em;
	top: -.1em;
}

aside#shop-info div span.icon-time::before{ content: '\E12b';}
aside#shop-info div span.icon-address::before{ content: '\E103';left: -1.12em;}
aside#shop-info div span.icon-phone::before{ content: '\E100'; }

/**********************************************************************
 既読未読機能
***********************************************************************/

#member-haveread {
	border: 1px solid #CCC;
	border-radius: .5em;
	padding: .5em;
	font-size: .75em;
}

#member-haveread h5 {
	margin: 0;
	border-bottom: 1px solid #CCC;
}

#member-haveread span {
	margin: 0 .5em;
}

/**********************************************************************
 コメント欄
***********************************************************************/
.discussion .comment-avatar {
	width: 3em;
	height: 3em;
	border-radius: 50%;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.discussion {
	margin-top: 5em;
}

.discussion .comment-body {
	position: relative;
	display: flex;
	align-items: flex-start;
}
.discussion .comment-body.mine { text-align: right; flex-direction: row-reverse; }
.discussion .comment-body.others { justify-content: flex-start; flex-direction: row; }

.comment-content {
	position: relative;
	height: fit-content;
	max-width: 60%;
	margin: .5em;
	padding: .5em 1em;
	border-radius: 1em;
}


.comment-content P {
	text-indent: 0!important;
	text-align: left!important;
	line-height: 1.25em!important;
	margin: 0!important;
}

.comment-content.mine { background-color: var(--my-site-color);}
.comment-content.others { background-color: #DDD; }

.comment-content.others::before,
.comment-content.mine::after {
	content: "";
	position: absolute;
	background-color: inherit;
	width: 1em;
	height: .75em;
	top: .75em;
	clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.comment-content.mine::after {
	right: -.5em;
}
.comment-content.others::before {
	left: -.5em;
	transform: scale(-1, 1);
}

.comment-unapproved {
	position: absolute;
	top: -1.25em;
	font-style:normal;
	font-size: .75em;
	color: #999;
}

.comment-unapproved.mine{right: 4.5em;}
.comment-unapproved.others{left: 4.5em;}

.comment-author {
	color: #666;
}

.mine .comment-author { display: none; }

.discussion aside {
	font-size: .75em;
	color: #CCC;
}
.discussion aside.mine { text-align: right; }

#comment-area {
	width: 500px;
	max-width: 80vw!important;
	margin: auto;
	margin-top: 5em;
}
 
#comment-area textarea {
	margin: 0!important;
}
#comment-area textarea::placeholder {
	opacity: 0.75;
	margin: 0;
}

#respond #submit {
	background-color: red;
}

#respond .form-submit {
	display: flex;
	justify-content: center;
	margin: 0!important;
	margin-bottom: 1em!important;
}

#respond #submit {
	padding: 0!important;
	margin: 0!important;
	background: #FFF;
	background-image: url('parts/img/fukidasi.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; /* ボタンの幅を画像の幅に調整 */
    height: 30px; /* ボタンの高さを画像の高さに調整 */
    border: none; /* 枠線を取り除く */
    cursor: pointer; /* カーソルをポインターに変更 */
    text-indent: -9999px;  /* 文字を非表示にする */
}

#respond #submit:hover {
	background-color: rgba(255,255,255,0)!important;
	opacity: .5;
}
/**********************************************************************
 footer
***********************************************************************/
footer {
	background: #F9F9F9;
    mix-blend-mode: multiply;
	padding: 1em;
	margin-top: auto;
	height: 150px;
}

footer #logo {
	width: 170px;
	height: 17px;
	margin-top: .25em;
}
footer ADDRESS { 
	display: flex;
	justify-content: center;
	font-style: normal;
	font-size: .75em;
	margin: 1em auto;
	line-height: 1.5em;
}
footer ADDRESS DIV {
	border-left: 1px solid #333;
	margin-left: 1em;
	padding-left: 1em;
}

footer small{
    display: block;
    text-align: center;
	margin-top: 2em;
}

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

fieldset {
	width: 100%;
}

fieldset > div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%!important;
	margin: .5em 0;
}

fieldset label {
	display: inline-block;
	min-width: 5em;
	flex-grow: 1;
	flex-basis: 20%;
}

fieldset > div > div {display: inline-block;
	flex-grow: 1;
	flex-basis: 80%;
}

label {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: .8em;
}

select,
input, textarea {
	caret-color: var(--my-site-color);
}
	
select,
input {
	margin: 0;
	padding: .5em!important;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="checkbox"] {
	position: relative;
	width: 1em!important;
	height: 1em!important;
	padding: .25em!important;
	border-radius: .25em;
	background-color: #F0F0F0;
}

input[type="checkbox"]:checked:before {
	position: absolute;
	top: 1px;
	left: 4px;
	transform: rotate(50deg);
	width: 4px;
	height: 8px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	content: '';
}

select,
textarea,
input[type="date"],
input[type="text"],
input[type="email"],
input[type="password"]{
	border: 1px solid #F0F0F0!important;
	background-color: #F0F0F0;
	border-radius: .5em;
	padding: .25em;
	font-size: 1em;
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"]{
	width: 100%;
}

textarea:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus{
	border: 1px solid #DDD;
	background-color: #FFF;
	outline:0;
}

/*submitを統一*/
input[type="submit"] {
	width: fit-content;
	background-color: #333;
	font-size: 1.2em;
	color: #FFF;
	margin-top: 1em;
	padding: .25em 1em!important;
	border-radius: .5em;
	transition: .5s;
}

input[type="submit"]:hover {
	background-color: var(--my-site-color)!important;
	color: #FFF;
	transition: .5s;
}

#contact section div {
	padding-top: 2em;
	width: 600px;
	max-width: 95vh;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
アーカイブページ
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

section#archives H1 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 1.5em;
	text-align: center;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--my-site-color);
	text-underline-offset: 5px;
}

section#archives ul {
}

section#archives li {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	line-height: 120%;
	margin-bottom: 1em;
	padding-bottom: .5em;
	border-bottom: 1px solid #EEE;
}

section#archives ul time {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: .75em;
	width: 6.5em;
}
section#archives a {
	margin-left: 1em;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
小物
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.right {
	display: block;
	width: fit-content;
	margin: 0 0 0 auto;
}

.float-right {
	float: right;
}


.small {
	font-size: .75em;
}

.gothic {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.req {
	color: red;
	font-size: 1.2em;
}

.chawankun {
	position: absolute;
	display: block;
	width: 110px;
	height: 110px;
	background-repeat: no-repeat;
	background-size: contain;
}
a.chawankun {
	width: 55px;
	height: 55px;
}
.chawankun.fig1 {
	bottom: 0;
	left: -15px;
	background-image: url("parts/img/chawankun-1.png");
}
.chawankun.fig2 {
	bottom: -25px;
	right: 3em;
	background-image: url("parts/img/chawankun-2.png");
}
.chawankun.fig3 {
	bottom: -25px;
	right: 3em;
	background-image: url("parts/img/chawankun-2.png");
}
.chawankun.fig4 {
	bottom: -25px;
	right: 3em;
	background-image: url("parts/img/chawankun-2.png");
}
.chawankun.fig5 {
	bottom: -25px;
	right: 3em;
	background-image: url("parts/img/chawankun-2.png");
}

a#back_button {
	display: block;
	width: fit-content;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	margin: 2em auto!important;
	padding: .25em 1.5em;
	box-sizing: border-box;
	border-radius: .5em;
	background: #333;
	color: #FFF;
	transition: .5s;
	z-index: 1000;
}

a#back_button:hover {
	opacity: .5;
	transition: .5s;
}

.common-button {
	display: inline-flex;
	margin: 0 auto;
	background-color: #333;
	border: none;
	cursor: pointer;
	outline: none;
	padding: .5em 1.5em;
	appearance: none;
	border-radius: .5em;
	line-height: 120%;
	color: #FFF;
	font-size: 1.2em;
	transition: .5s;
}

.common-button:hover{
	background-color: #999;
	transition: .5s;
}

#edit_button {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: .8em;
	text-align: right;
	margin: 1em auto;
}

/*///////////////////////////////////////////////////////////////////////
 レスポンシブ
///////////////////////////////////////////////////////////////////////*/

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
PC
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

span#admin span {
	position: absolute;
	top:0;
	left: 0;
	z-index: 3000;
	display: none;
}

@media screen and (min-width: 1201px) {
	
	header .wrapper, main {
		width: 1200px;/*border: 1px solid red;*/
	}


}
@media screen and (max-width: 1200px) {
	
	header .wrapper, main {
		width: 90vw;/*border: 1px solid green;*/
	}
	
	#member_mypage section:first-of-type {
		width:49%;
	}
	#member_mypage section:last-of-type {
		width: 49%;
	}

	
	/*メンバーズカード*/
	#members-card {
		width: 48vw;
		height: calc(48vw * 0.635);
		max-width: 375px;
		max-height: 240px;
	}
	#members-card .card-front h1 {
		font-size: 1em;
	}

	/*?
	.signupform input[type="text"],
	.signupform input[type="password"],
	.signupform input[type="email"],
	.signupform DIV{
		margin-bottom: .5em;
		line-height: 1em;
	}
	*/
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
タブレット
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 850px) {
		
	
	/*メンバーズカード*/
	#members-card {
		width: 100%;
		height: calc(44vw * 0.635);
	}
	#members-card .card-front h1 {
		font-size: 1em;
	}

	article#headlines {
		display: block;
	}
	article#headlines section {
		width: 100%!important;
	}

	
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
スマホ
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@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#menu {
		
	}
	header nav#menu UL {
		width: 90vw;
		margin: auto!important;
		flex-direction: column!important;
		justify-content: center!important;
		align-items: center;
	}
	
	nav#menu UL LI {
		text-align: center;
		background: none;
		width: 100%;
		font-size: 1.25em;
	}
	
	nav#menu UL LI a {
		display: block;
		text-align: center;
		width: 80%!important;
		background: #D7E7AF;
		border-radius: .5em;
		padding: .5em 0;
		margin: .5em auto;	
	}
	
	header nav #logout {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}
	
	header nav LI#logout a {
		color: #FFF;
		background: #333;
		font-size: .8em!important;
	}
	
	header nav LI#logout a:hover {
		background: var(--my-site-color);
	}
	
	.hamburger {
		position: fixed;
		right: 20px;
		top: 20px;
		width: 30px;
		height: 21px;
		cursor: pointer;
	}
    
    .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 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%;
	}
	
	/*wp-mem 登録・パスワード変更ボタン*/
	#profile section nav li {
		width: 90vw;
		text-align: center;
	}
	
}