/*
Theme Name:mami-suuhi
Template:noel_tcd072
Version:1.9.2
*/

/* ----------------------------------------------------------------------------
// 共通
---------------------------------------------------------------------------- */
:root
{
	--color-emerald: #50C878;
	--color-emerald-thin: #72d393;
	--color-llrac: #c2a2da;
	--color-lirac-thin: #c2a2da;
	--color-font-main: #404040;
}

body *
{
	color: var(--color-font-main);
}

#footer_menu_area, #page_header_inner
{
	display: none;
}
.index_cb_button a, .button a
{
	border-radius: 100vh;
}

/* ----------------------------------------------------------------------------
// 数秘
---------------------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
	.suuhi-main
	{
		width: 100% !important;
		margin: 0 auto !important;
		padding: 2rem 0 0 0 !important;
		font-size: 1.3rem !important;
	}
	.suuhi-main .wp-element-button, #calcbtn
	{
		margin: 23px 0 0 0;
		display: inline-block;
		min-width: 240px;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 16px;
		box-sizing: border-box;
		border-radius: 100vh;
	}
}
@media screen and (min-width: 768px)
{
	.suuhi-main
	{
		width: 80% !important;
		margin: 0 auto !important;
		padding: 2rem 0 0 0 !important;
		font-size: 1.3rem !important;
	}
	.suuhi-main .wp-element-button, #calcbtn
	{
		margin: 23px 0 0 0;
		display: inline-block;
		min-width: 240px;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 16px;
		box-sizing: border-box;
		border-radius: 100vh;
	}
}

.suuhi-main .wp-element-button, #calcbtn
{
	color: white;
	background: var(--color-emerald);
}
.suuhi-main .wp-element-button:hover, #calcbtn:hover
{
	color: white;
	background: var(--color-emerald-thin);
}
.suuhi-main p, .suuhi-main li 
{
	line-height: 2rem !important;
}
.suuhi-main li
{
	margin: 0 0 1rem 0 !important;
}

.suuhi-align-center
{
	text-align: center;
}
.suuhi-separator
{
	margin-top: 4rem;
}

/* ----------------------------------------------------------------------------
// 生年月日入力フォーム表示
---------------------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
	select
	{
		width: 32%;
	}
}
@media screen and (min-width: 768px)
{
	select
	{
		width: 25%;
	}
}

select 
{
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  height: 37px;
  padding-left: 10px;
	background-image: url(https://biz-suuhi.com/wp-content/uploads/2023/01/arrow-bottom.png);
	background-position: right 5px center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
}
select::-ms-expand 
{
  display: none;
}
select:focus
{
	outline: 1px var(--color-emerald) solid;
	border: none;
}
#suuhi-calc
{
	text-align: center;
	padding: 2rem 0 0 0;
}
#suuhi-calc p
{
	margin: 0 0 0.3rem 0;
	font-size: 1.3rem;
}
#calcbtn
{
	border: none;
}

/* ----------------------------------------------------------------------------
// 生年月日タイトル表示
---------------------------------------------------------------------------- */
#birth-day
{
	text-align: center;
	font-size: 1.4rem;
	padding: 3rem 0 0 0;
}
#birth-day h2 
{
  position: relative;
  display: inline-block;
  padding: 0 55px;
	font-size: 2rem;
}
#birth-day h2:before, #birth-day h2:after 
{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
#birth-day h2:before 
{
  left:0;
}
#birth-day h2:after 
{
  right: 0;
}
#p-num h2, #p-cycle h2
{
	text-align: center;
}

/* ----------------------------------------------------------------------------
// 個性数表示
---------------------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
	.kosei
	{
		width: 100%;
	}
}
@media screen and (min-width: 768px)
{
	.kosei
	{
		width: 80%;
		margin: 0 auto;
	}
}

/* ----------------------------------------------------------------------------
// 個人サイクル表示
---------------------------------------------------------------------------- */
#p-cycle *
{
  box-sizing: border-box;
}
#p-cycle p
{
  line-height: 1.8;
  margin: 0;
	font-size: 1.2rem;
}
#p-cycle h2, #suuhi-calc h2, #p-num h2 
{
  font-size: 36px;
  margin: 0 0 30px;
  padding: 10px;
  font-weight: bold;
}
#p-cycle dl 
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#p-cycle dl dt 
{
  margin: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  width: 6.5em;
  padding: 0.5em 1.0em 0.5em 0.5em;
  position: relative;
  font-weight: 100;
  line-height: 1;
}
#p-cycle dl dt::after 
{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  content: '●';
  position: absolute;
  right: -0.5em;
  top: 5px;
  font-size: 30px;
  color: green;
}
#p-cycle dl dd 
{
  width: calc(100% - 6.5em);
  padding: 0.1em 1.5em 1.0em 1.5em;
  border-left: 2px solid #ccc;
  margin: 0;
  font: inherit;
  vertical-align: baseline;
}
#p-cycle dl dd h3 
{
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 5px;
  padding: 0;
}
#p-cycle dl dt.thisyear::after 
{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  content: '●';
  position: absolute;
  right: -0.5em;
  top: 5px;
  font-size: 30px;
  color: red;
}
.error
{
	color: red;
}
h3.thisyear a, h3.thisyear a:hover
{
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 228, 0, 0.4);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

.p-page-header
{
display: none;
}
.numinfo
{
font-size: 1.5rem !important;
}

/* ----------------------------------------------------------------------------
// 各種番号表示
---------------------------------------------------------------------------- */
.aligncenter
{
	text-align: center;
}

@media screen and (max-width: 767px)
{
	.num-target, .num-title, .num-detail, .onepoint, .shimei
	{
		color: var(--color-font-main);
		width: 100% !important;
		margin: 0 auto !important;
	}
	.num-target
	{
		font-size: 2rem !important;
	}
	.num-title
	{
		font-size: 2.4rem !important;
	}
	.num-detail, .num-feature
	{
		font-size: 1.3rem !important;
		line-height: 1.4 !important;
	}
	.onepoint, .shimei
	{
		width: 85% !important;
	}
}

@media screen and (min-width: 768px)
{
	.num-target, .num-title, .num-detail, .onepoint, .shimei
	{
		color: var(--color-font-main);
		width: 80% !important;
		margin: 0 auto !important;
	}
	.num-target
	{
		font-size: 2rem !important;
	}
	.num-title
	{
		font-size: 2.4rem !important;
	}
	.num-detail, .num-feature
	{
		font-size: 1.3rem !important;
		line-height: 1.4 !important;
	}
	.num-feature
	{
		width: 80% !important;
		margin: 0 auto !important;
	}
}

.onepoint, .shimei
{
	position: relative;
	font-weight: bold;
	line-height: 1.4 !important;
	padding: 0.8em 0.8em;
	border-bottom: 2px solid var(--color-emerald);
	font-size: 1.5rem !important;
	color: var(--color-font-main);
}
.onepoint:after 
{
	content: '\ポイント \f0a7';
}
.shimei:after 
{
	content: '\今生の使命 \f0a7';
}
.onepoint:after, .shimei:after
{
	position: absolute;
	font-family: "Font Awesome 5 Free";
	transform: rotate(-20deg);
	line-height: 1.3;
	background: var(--color-emerald);
	color: #ffffff;
	left: -20px;
	font-weight: bold;
	bottom: 100%;
	border-radius: 5px;
	padding: 5px 7px 3px;
	font-size: 0.7em;
}

/* ----------------------------------------------------------------------------
// 問い合わせフォーム
---------------------------------------------------------------------------- */
#inquiry p.ip
{
	margin: 0;
	padding: 0 10px;
	text-align: left;
}

#inquiry span.h-on
{
	padding: 0 5px;
	border-radius: 5px;
	background-color: #f54642;
	color: #ffffff;
}

#inquiry span.h-off
{
	padding: 0 5px;
	border-radius: 5px;
	background-color: #888888;
	color: #ffffff;
}

input[type="text"], input[type="email"], textarea, .mw_wp_form_input .mwradio
{
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 0 0 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus
{
  border-color: var(--color-emerald);
  box-shadow: 0 0 8px 0 var(--color-emerald);
}

.inputWithIcon input[type="text"], .inputWithIcon input[type="email"], .inputWithIcon textarea, .mw_wp_form_input .mwradio
{
  padding-left: 50px;
}

.inputWithIcon textarea
{
	resize: vertical;
	min-height: 50px;
}

.inputWithIcon 
{
  position: relative;
}

.inputWithIcon i, .mw_wp_form_input .mwradio i
{
  position: absolute;
  left: 0;
  top: 5px;
  padding: 0 6px;
  color: #aaa;
  transition: 0.3s;
}

.mw_wp_form_input .mwradio
{
	text-align: left;
}

.mw_wp_form_input .mwradio i
{
  padding: 0 7px;
}

.inputWithIcon input[type="text"]:focus + i, .inputWithIcon input[type="text"]:focus + span + i, 
.inputWithIcon input[type="email"]:focus + i,
.inputWithIcon textarea:focus + i, .inputWithIcon textarea:focus + span + i
{
  color: var(--color-emerald);
}

.mwform-radio-field-text
{
	line-height: 22px;
}

.message-default
{
	margin: 0 0 0.5em 0 !important;
}

@media screen and (max-width: 767px) 
{
	.message-default, .message-input, .message-confirm
	{
		text-align: left;
	}
}

@media screen and (min-width: 768px) 
{
	.message-default, .message-input, .message-confirm
	{
		text-align: center;
	}
}

.form-button
{
	position: relative;
	display: flex;
	justify-content: center;
}

.form-submit, .form-back
{
	width: 150px;
	height: 50px;
	border-radius: 8px;
	background-color: var(--color-emerald);
	color: white;
	border: none;
	margin: 30px 10px;
	cursor: pointer;
}

.form-submit:hover, .form-back:hover
{
	background-color: var(--color-emerald-thin);
}

.mw_wp_form .error
{
	text-align: left;
	padding: 0 50px;
}

.mw_wp_form_input .message-input
{
	display: block;
}

.mw_wp_form_input .message-confirm
{
	display: none;
}

.mw_wp_form_confirm .message-input
{
	display: none;
}

.mw_wp_form_confirm .message-confirm
{
	display: block;
}

.mw_wp_form_confirm .inputWithIcon i
{
	display: none;
}

.mw_wp_form_confirm .inputWithIcon
{
	text-align: left;
	padding: 0;
	font-size: 1.2em;
	width: 80%;
	color: var(--color-emerald);
	word-break: break-all;
}

.mw_wp_form_complete
{
	text-align: center;
}