/*
Theme Name: Graphy Pro Child
Theme URI: http://themegraphy.com/wordpress-themes/graphy/#pro
Description: Graphy Pro Child Theme
Author: Your Name
Author URI: http://example.com/
Template: graphy-pro
Version: 1.0.0
*/

/* Theme customization starts here
------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500,700,800,900&display=swap");

/* .m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
} */

:root {
  --gold: #ba9e30;
  --green: #008200;
  --lightgreen: #4cbb17;
  --fontcolor: #333;
  --blue: #27acd9;
  --pink: #f9629f;
  --lightpink: #ffc0cb;
}
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: var(--fontcolor);
}
h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
}
h1 {
  font-size: 2rem;
  margin-bottom: 1em;
  margin-top: 2em;
}
h2 {
  font-size: 1.5rem;
  margin-bottom: 1em;
  margin-top: 2em;
}
h3 {
  font-size: 1.25rem;
  margin-bottom: 1em;
  margin-top: 1.5em;
}
h4 {
  font-size: 1.125rem;
  margin-bottom: 1em;
  margin-top: 1.5em;
}
h5 {
  font-size: 1.063rem;
  margin-bottom: 0.5em;
  margin-top: 1em;
}
h6 {
  font-size: 1rem;
  margin-bottom: 0.5em;
  margin-top: 1em;
}
.site-title {
  font-size: 2.375rem;
  margin-bottom: 20px;
}
.site-description {
  font-style: normal;
}

.attention-box {
	  background: #fd5c63;
  border: dashed 2px #d2122e;
  border-radius: 1em;
  color: #fff;
  font-weight: 500;
  padding: 1em;
  line-height: 1.5;
}
/* Base */
.widget {
  /*	font-size: 87.5%;*/
  font-size: 95%;
}

.top-page .list-btn {
  text-align: center;
  display: inline-block;
  border: 1px solid #adadad;
  background: #fff;
  padding-block: 1em;
  padding-inline: 2em;
  text-decoration: none;
  color: var(--gold);
}
.top-page .list-btn:hover {
  background-color: #eee;
  color: #555;
}
.entry-title,
.page-title {
  font-size: 1.875rem;
  font-weight: 500;
}
@media (width < 540px) {
  .entry-title,
  .page-title {
    font-size: 1.625rem;
  }
}
.btn-box {
  /* margin-inline: auto; */
  text-align: center;
}
.btn-box .free-btn {
  border-radius: 20px;
  display: inline-block;
  background: var(--green);
  padding-block: 1em;
  padding-inline: 2em;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s;
}
.btn-box .free-btn:hover {
  color: #ffffbc;
  transform: scale(1.2);
  background: var(--lightgreen);
}

.sp-only {
  display: none;
}
@media (width < 540px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

.message-box + a.free-form-btn {
  color: #fff;
  display: block;
  text-align: center;
  /* vertical-align: middle; */
  text-decoration: none;
  margin: auto;
  padding: 1rem 4rem;
  font-weight: bold;
  border-radius: 5px;
  transition: 0.5s;
  animation: move_b 2s infinite;
}
@keyframes move_b {
  0% {
    transform: translate(4px, 0px);
  }
  5% {
    transform: translate(-4px, 0px);
  }
  10% {
    transform: translate(4px, 0px);
  }
  15% {
    transform: translate(-4px, 0px);
  }
  20% {
    transform: translate(4px, 0px);
  }
  25% {
    transform: translate(-4px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}
a.free-form-btn:hover {
  background: #fff;
}
.message-box + a.green-btn {
  border: 2px solid var(--blue);
  background: var(--blue);
}
.message-box + a.green-btn:hover {
  color: var(--blue);
	background: #fff;
}
.message-box + a.pink-btn {
  background: var(--pink);
  border: 2px solid var(--pink);
}
.message-box + a.pink-btn:hover {
  color: var(--pink);
  background: #fff;
}

.entry-meta {
  color: var(--gold);
}
.site-header {
  margin-bottom: 25px;
}
.top-key-visual {
  box-sizing: border-box;
  margin-inline: auto;
  text-align: center;
}
.top-key-visual > img {
  width: 100%;
  max-width: 1260px;
  height: auto;
}
.top-page section {
  margin-bottom: 100px;
}
.top-header {
  text-align: center;
}
/* .order-wrap .top-page-title {
	display: inline-block;
} */
.top-page-title {
  margin-top: 1em;
}
.top-sub-title {
  position: relative;
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 50px;
  display: inline-block;
  padding-inline: 40px;
}
.top-sub-title::before {
  position: absolute;
  content: "";
  background: url(../graphy-pro/assets/img/petal.png) center bottom no-repeat;
  background-size: contain;
  height: 20px;
  width: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.top-sub-title::after {
  position: absolute;
  content: "";
  background: url(../graphy-pro/assets/img/petal.png) center bottom no-repeat;
  background-size: contain;
  height: 20px;
  width: 20px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.top-info > *:last-child {
  margin-top: 70px;
  margin-bottom: 0;
  display: block;
  text-align: center;
}
.top-info-box {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}
.top-info-box:nth-child(odd) {
  flex-direction: row-reverse;
}
.top-info-img {
  align-self: flex-start;
  flex: 1 1 650px;
  overflow: hidden;
}
.top-info-box:nth-of-type(even) .top-info-img {
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.top-info-box:nth-of-type(odd) .top-info-img {
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
}
.top-info-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 650px;
  height: auto;
}

.top-info-txt {
  flex: 1 1 100%;
}

@media (width < 783px) {
  .top-info-box {
    display: block;
  }
  .top-info-img {
    width: 100%;
    margin-bottom: 30px;
  }
  .top-info-box:nth-of-type(even) .top-info-img {
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .top-info-box:nth-of-type(odd) .top-info-img {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .top-info-img img {
    width: 100%;
  }
}
@media (width < 540px) {
  .top-page section {
    margin-bottom: 50px;
  }
  .top-sub-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  .top-info > *:last-child {
    text-align: left;
  }
}

.page.full-width .new-blog .entry-header {
  text-align: left;
}
.post-list-content a.category {
  color: var(--gold);
}

.new-blog .entry-title a {
  font-size: 1.625rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.new-blog .entry-title a:hover {
  color: #555;
}

.free-info {
  border: 1px solid #dcdcde;
  padding: 0;
  margin: 0;
  padding: 2em;
  padding-top: 130px;
  background: #fff;
  position: relative;
}
.free-info::after {
  position: absolute;
  content: "";
  background: url(../graphy-pro/assets/img/free_btn_bg.png) right bottom
    no-repeat;
  /* right: 25px;
	bottom: 25px; */
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  height: 102px;
  width: 200px;
  background-size: contain;
}
.free-info > :last-child {
  margin-bottom: 0;
}
.free-info h3 {
  text-align: center;
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
}
.free-info p {
  margin: 0 0 1em;
}

.cards {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}
.cards a {
  text-decoration: none;
}
.cards > *:last-child {
  margin-bottom: 0;
}
.card-img {
  flex: 1 1 270px;
  align-self: flex-start;
  overflow: hidden;
}
.card-img img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 270px;
  height: auto;
  transition-duration: 1s;
}
.card-img img:hover {
  transform: scale(1.3) rotatez(-10deg);
  transition-duration: 1s;
}
.card-text {
  flex: 1 1 100%;
}
.card-text .card-cat,
.card-text .card-cat a,
.card-text .date {
  color: var(--gold);
  font-size: 0.875rem;
}
.card-text .date {
  margin-bottom: 10px;
}
.card-text .card-cat a:hover {
  background: var(--gold);
  color: #fff;
}
.card-text h2 {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: 500;
}
.new-blog .card-link,
.card-link {
  transition: all 0.3s ease;
}
.new-blog .card-link:hover,
.card-link:hover {
  opacity: 0.6;
}
.card-link > *:nth-child(3) {
  color: var(--fontcolor);
}

@media (width < 540px) {
  .cards {
    display: block;
    margin-bottom: 50px;
  }
  .card-text h2 {
    font-size: 1.5rem;
  }
  .card-img {
    flex: 1 1 100%;
    margin-bottom: 15px;
  }
  .card-img img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
    transition-duration: 1s;
  }
  .card-link > *:nth-child(3) {
    font-size: 1rem;
  }
  .card-text .date {
    margin-bottom: 5px;
  }
}

.price-box {
  border: 2px solid var(--gold);
  padding: 2em;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 500;
}
.price-box p {
  margin: 0;
}
.price-box span {
  font-size: 1.375rem;
  color: red;
}
.condition-box ul {
  font-weight: 500;
}
.condition-box span {
  font-weight: 500;
  font-size: 1.125rem;
  color: red;
}

.attention {
  text-align: center;
  font-weight: 500;
  font-size: 1.125rem;
  color: red;
}
.flow-content p {
  text-align: center;
  position: relative;
}
.flow-content p::after {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  content: "\f103";
  font: var(--fa-font-solid);
  color: var(--blue);
}
.flow-content p:last-child::after {
  display: none;
}

/* .site-title{
	font-family: 'M PLUS 1p', sans-serif;
	font-size:2.5rem;
}
.site-description {
	font-family: 'M PLUS 1p', sans-serif;
	font-style: normal;
}
.entry-title{
	font-family: 'M PLUS 1p', sans-serif;
	font-style: normal;
}
.widget-title{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight:700;
}
.page-title {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight:700;
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight:500;
}
.footer-navigation .menu a{
	font-size:60%;
	color: #cccccc;
}
.jp-relatedposts-title{
	font-family: 'M PLUS 1p', sans-serif;	
}


header.wp-show-posts-entry-header {
	margin-bottom:0.5em;
}
h3.wp-show-posts-entry-title a {
	font-size:1.3rem;
	text-decoration:none;
	color:#FF6699;
}
.wp-show-posts-posted-on a {
	color:#fff;
	background:silver;
	text-decoration:none;
	font-size:0.8rem;
	padding:0 5px;
}
.wp-show-posts-entry-summary {
	margin-bottom:0.5em;
}
.wp-show-posts-entry-summary p {
	font-size:1rem;
}
a.wp-show-posts-read-more {
	padding:3px;
	background:#FF6699;
	color:#fff;
	border:none;
	text-decoration:none;
	font-size:0.8rem;
}
a.wp-show-posts-read-more:hover {
	border:none;
	background:silver;
	color:#fff;
}
.wp-show-posts-inner {
	border-top:solid 1px silver;
	padding-top:1rem;
}
time.wp-show-posts-entry-date {
	color:#fff;
}
.wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) {
    margin-bottom: 1em;
}



.arrow-bottom {
	margin:0 auto;
 	position:relative;
	height:16px;
	width:16px;
	background-color: #003399;
	margin-bottom:25px;
}
.arrow-bottom::before {
	position:absolute;
	content:"";
	border:solid 16px transparent;
	border-top:solid 16px #003399;
	top:10px;
	left:-8px;
}


.entry-content h2.session-title{
	border: none;
	padding:0;
}
.entry-content h3.session-title{
	border: none;
	padding:0;
	margin:0;
	background:none;
	font-size:2em;
	border-bottom: solid 1px #003399;
}
.entry-content h3.session-title:before{
	font-family: FontAwesome;
	content: '\f14a'; 
	margin-right:0.5em;
	color:#ff4500;
}
ul.session-list {
  list-style: none;
}
ul.session-list li{
	font-size:1.2em;
}
ul.session-list li:before {
	font-size:1.5em;
	font-family: FontAwesome;
	position:relative;
	top:4px;
	margin-left:-1em;
	margin-right:0.5em;
	color:#ff4500;
}
ul.session-list li.question:before{
	  content: '\f059'; 
}
ul.session-list li.exclamation:before{
		  content: '\f06a'; 
}
ul.session-list li.frown:before{
		  content: '\f119'; 
}
.entry-content h2.attention{
	border: none;
	padding:0;
	background-color:red;
	font-size:2em;
	color:white;
}
.entry-content h2.step-title{
	font-weight:700;
	border:none;
	position: relative;
  border-top: solid 2px #ff4500;
  border-bottom: solid 2px #ff4500;
  background: #fff2e5;
  line-height: 1.4;
}
.entry-content h2.step-title:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ CHECK';
  background: #ff4500;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}
.entry-content h2.step-title-blue{
	font-weight:700;
	border:none;
  position: relative;
  border-top: solid 2px #0068b7;
  border-bottom: solid 2px #0068b7;
  background: #eaf4ff;
  line-height: 1.4;
}
.entry-content h2.step-title-blue:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #0068b7;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}
.entry-content h2.step-title-red{
font-weight:700;
	border:none;
  position: relative;
  border-top: solid 2px #e4007f;
  border-bottom: solid 2px #e4007f;
  background: #ffeaf4;
  line-height: 1.4;
}
.entry-content h2.step-title-red:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ CHANGE';
  background: #e4007f;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}
h4.blue-line {
	border-bottom:solid 2px blue;
	padding-bottom:3px;
	font-size:1.2em;
	margin-top:1.8em;
}


.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'FontAwesome', 'M PLUS 1p', sans-serif;
	font-size:1.1em;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa dt,.cp_qa dd {
	position: relative;
	padding: 0.5em;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
	border-radius: 0.3em;
}
.cp_qa dt {
	margin: 0 3em 1em 3em;
	background: #ffd6d6;
}
.cp_qa dd {
	margin: 0 3em 3em 3em;
	background: #dbedff;
}
.cp_qa dt::before,.cp_qa dd::before{
	position: absolute;
	z-index: 99;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
.cp_qa dt::before {
	left: -0.5em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #ff4500 transparent transparent;
}
.cp_qa dd::before {
	right: -0.5em;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent  #0066cc;
}
.cp_qa dt::after,.cp_qa dd::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.2em;
}
.cp_qa dt::after {
	left: -2.5em;
	margin: 0 0.5em 0 0;
	padding: 0.2em 0.4em;
	content: '\f128';
	background: #ff4500;
}
.cp_qa dd::after {
	right: -2.5em;
	margin: 0 0 0 0.5em;
	padding: 0.2em 0.55em;
	content: '\f12a';
	background: #0066cc;
}

.profile-btn a{
	text-decoration:none;
}
.profile-btn a:hover {
	color:yellow;
	font-weight:700;
}

.offer{
	margin:0 auto;
	text-align:center;
}
a.offer-button {
  background-color: #0080ff;
  border: 4px solid #002bff;
  color: #fff;
  line-height: 50px;
	font-size:2.5em;
	padding:0.5em;
	text-decoration:none;
}
a.offer-button:hover {
  background-color: #fff;
  border-color: #003399;
  color: #59b1eb;
}
.box-wrap {
	display:flex;
}
.box{
	margin:0 auto;
	width:30%;
	float:left;
	margin-left:5%;
	padding:2%;
	box-sizing: border-box;
	border: 5px double goldenrod;
}
.box:first-child{
	margin-left:0;
}
.box img {
	margin-left:10%;
	width:70%;
	height:auto;
}
h3.tokuten {
	background:none;
	font-size:1.2em;
	font-weight:700;
	color:#7F6A00;
	margin-bottom:5px;
	padding-bottom:2px;
	border-bottom:solid 2px #CCAA00;
}
.box p {
	margin-bottom:0;
}
.box-pd-01 {
	padding:0.1em 1em;
}

@media screen and (max-width: 783px) {
	a.offer-button{
			font-size:1.5em;
	}
		.box-wrap {
	display:block;
}
	.box{
		clear:both;
		float:none;
		width:100%;
		margin-left:0;
		margin-bottom:5%;
		}
}


mark.yellow{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ff0 0%) repeat scroll 0 0;
}

.is-style-fill a{
	background-color:#0033cc;
	text-decoration:none;
	font-size:1.3em;
}
.is-style-fill a:hover {
	background-color:#99ccff;
	color:#001e43;
	font-weight:700;
}

#post-box {
	background-color:#e5f2ff;
	padding:2rem;
	padding-top:0;
}
#post-box form {
	position:relative;
	top:-2rem;
}
 */