@charset "utf-8";

/*============================================================
  Sun MI-YU
============================================================ */
/*
layout.css
color:#202020;
point color:#019bbc
point color:#582E02;
point color:rgb(201,194,177)#c9c2b1



-------------------------------------------------------*/ 
/* SECOND LEVEL
-------------------------------------------------------*/
#all{
position: relative;
width: 100%;
margin-top:0;
padding-top: 0;
margin-left: auto;
margin-right:auto;
text-align: center;
background: #EDEDE1;
}
.coaching,.session,.reiki,.powerstone-concept,.churaen-concept,.about-concept,.sp-lab-concept,.contact{
margin:0 auto 10px;
background: #EDEDE1;
text-align: center !important;
padding-bottom: 20px !important;
}

/*PCメニュー*/
#header {
position: fixed;
top:40px;
left:70px;
right:70px;
bottpm:20px;
display: flex;
padding: 5px 0px 5px 10px;
background-color: rgba(250,245,245,0.92);
border-radius: 10px;
border:#019bbc solid 0.8px;
z-index: 3000;
}
.coaching,.session,.reiki,.powerstone,.churaen,.sp-lab,.about {
padding-top:150px;
}

.lighter{
width: 100%;
text-align: left;
margin:10px auto 40px;
padding:30px 0 50px; 
background: #FCFAEF;
}
/*--------------------------------------------------
　 COACHING
-------------------------------------------------------*/
.coaching-concept {
max-width: 840px;
width: 90%;
margin:20px auto 20px !important;
height: auto;
line-height: 220%;
text-align: left;
}

/*--------------------------------------------------
　 SESSION
-------------------------------------------------------*/
.session-concept {
max-width: 840px;
width: 90%;
margin:20px auto 20px !important;
height: auto;
line-height: 220%;
text-align: left;
}


/*--------------------------------------------------
　REIKI
-------------------------------------------------------*/
.reiki-concept {
max-width: 840px;
width: 90%;
margin:20px auto 20px !important;
height: auto;
line-height: 220%;
text-align: left;
}
.attunement p{
padding: 20px 30px 5px;
text-align: left;
}
.attunement img{
padding:50px 20px 10px 0;
}
@media (max-width: 767px) {
.attunement {
text-align: center;
}
.attunement img{
width: 80%;
margin:0px auto;
padding:10px 0 10px;
text-align: center;
}
}

.recommendation{
max-width:700px;
margin:30px 25px 40px !important;
padding:0px 20px 30px 28px;
background:linear-gradient(rgba(255,255,255,0.5));
border-radius: 15px;
}
.recommendation ul{
color:#582E02;
width: 90%;
margin:0px 20px !important;
text-align: left;
}
.recommendation li{
font-family: 'Noto Sans JP', sans-serif;
font-size: 94%;
list-style: disc !important;
margin:0px auto 5px !important;
padding:0 10px 5px;
line-height: 130%;
font-weight: 300;
text-align: left;
}
@media (max-width: 767px) {
.recommendation{
max-width:700px;
margin:30px 20px 30px !important;
padding:0px 20px 30px 30px;
}
}

.course{
width:70%;
margin:20px auto 20px !important;
padding:30px 30px 30px 35px;
background:linear-gradient(rgba(255,255,255,0.5));
border: #019bbc 1px solid;
text-align: left;
}
.course:first-child{
margin:50px auto 20px !important;
}

.yaji{
font-size: 240%;
color:#019bbc;
margin:0px auto 0px !important;
}

.efficacy{
width:90%;
max-width:1300px;
margin:40px auto 60px !important;
padding:0px 34px 34px 34px;
background:linear-gradient(rgba(255,255,255,0.5));
border-radius: 15px;
}
.efficacy ul{
color:#582E02;
width: 98%;
margin:15px 10px -20px 30px !important;
text-align: left;
}
.efficacy li{
font-family: 'Noto Sans JP', sans-serif;
font-size: 100%;
list-style: disc !important;
margin:0px 0px 5px 0px!important;
padding:0 0px 5px 0px;
line-height: 190%;
font-weight: 300;
text-align: left;
}
@media (max-width: 767px) {
.efficacy{
max-width:90%;
margin:60px auto 50px !important;
padding:0px 20px 34px 20px;
}
.efficacy img{
width:98%;
margin:0px auto 10px !important;
padding:0px 20px 10px;
}
}

.reiki-wish {
width:88%;
max-width: 800px;
margin:60px auto 40px !important;
text-align: center;
}
.reiki-wish p {
font-family: "Klee One", cursive;
color:#582E02;
font-size: 102%;
line-height: 210%;
font-weight: 500;
text-align: left !important;
}
@media screen and (max-width: 767px) {
.reiki-wish p{
font-size: 98%;
line-height: 180%;
margin:15px auto 10px !important;
padding:10px 0.5% 0px 0.5%;
}
}


.cost01 h3{
color:#582E02;
padding:10px 0 0 25px;
text-align: left;
}
.cost01 p{
padding-left:15px;
font-size: 93%;
margin:10px 0 18px 20px;!important;
line-height: 168%;
}
table.cost01{
width: 94%;
max-width: 700px;
margin:10px 25px -24px  !important;
padding: 5px 10px;
text-align: left;
background-color: #FEFDF8 !important;
}
table.cost01 td{
font-size:0.96rem !important;
margin:10px auto 15px;
padding: 12px 16px 12px 22px;
border: #6A3601 1px solid !important;
}
table.cost01 td span{
font-size: 94%;
}


/*--------------------------------------------------
　POWER STONE
-------------------------------------------------------*/
.powerstone-concept p{
max-width: 880px;
width: 88%;
margin:20px auto 20px !important;
height: auto;
line-height: 220%;
text-align: left;
}

.recommend{
max-width:820px;
width: 95%;
margin:50px auto 50px !important;
padding:40px 20px 40px;
text-align: center;
background:#FBF9F2;
border-radius: 30px;
}
.recommend-title {
font-family: "Kosugi Maru", sans-serif;
margin-bottom: 20px;
color:#019bbc;
font-weight: 400;
font-style: normal;
}
.recommend p{
color:#582E02;
font-size: 1.0625rem;
margin:5px auto 5px !important;
font-weight: 500;
padding:5px 7% 5px;
line-height: 160%;
text-align: left;
}
@media screen and (max-width: 767px) {
.recommend{
max-width:820px;
width: 95%;
margin:50px auto 50px !important;
padding:40px 0 40px;
}
.recommend p{
padding:5px 4% 5px;
}
}

/* ---- COST ----*/
.cost{
width: 100%;
text-align: left;
margin:10px auto 40px;
padding:30px 0 50px; 
background: #FCFAEF;
}
.cost h3{
color:#582E02;
padding-left:15px;
}
.cost p{
padding-left:15px;
font-size: 93%;
margin:10px auto 18px !important;
line-height: 168%;
}
.cost-box{
margin:-6px 15px 10px 30px;
}
table.cost{
max-width: 700px;
margin:10px auto 15px;
padding: 5px 10px;
text-align: center;
background-color: #FEFDF8 !important;
}
table.cost td{
font-size:0.96rem !important;
margin:10px auto 15px;
padding: 12px 16px 12px 22px;
border: #6A3601 1px solid !important;
}
table.cost td span{
font-size: 94%;
}

/* ---- MOBILE ----*/ 
@media screen and (max-width: 989px) {
.cost-box{
margin:-5px 10px 10px 8px;
}
table.cost td{
padding: 14px 10px 14px 12px;
line-height: 140%;
font-size: 92%; 
}
}
@media screen and (max-width: 767px){
.cost-box{
margin:14px auto 10px;
}
table.cost{
max-width: 96%;
margin:20px auto 15px;
text-align: center!important;
}
table.cost td{
padding: 14px 15px 14px 16px;
line-height: 140%;
font-size: 94%; 
}
}		

.about-stone{
width: 86%;
margin:60px auto;
padding:30px 40px;
border:#7C3D80 1px solid;
border-radius: 30px;
background: linear-gradient(rgba(255,255,255,0.76)),url("../img/stone/back_stone.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.about-stone p{
text-align: left;
}
@media screen and (max-width: 767px){
.about-stone{
width: 94%;
margin:60px auto;
padding:20px 30px;
background-position: right;
background-size: cover;
}
}


/*------------------------------------------------------
  SP-LAB
-------------------------------------------------------*/
.lab-beginning p{
margin-top:0;
padding-left: 20px;
}
@media screen and (max-width: 1199px) {
.lab-beginning p{
padding-left: 10px;
}
}
@media screen and (max-width: 767px) {
.lab-beginning p{
padding:  10px 5px;
}
}

.activities2{
max-width:1100px;
width:100%;
margin:50px auto 50px !important;
padding:40px 40px 50px;
text-align: center;
background:linear-gradient(rgba(255,255,255,0.5));
border-radius: 30px;
}
.activities2 p{
color:#582E02;
font-size: 102%;
margin:0 auto 10px !important;
font-weight: 420;
line-height: 180%;
text-align: left;
}
@media screen and (max-width: 767px) {
.activities2{
max-width:820px;
width: 95%;
margin:30px auto 50px !important;
padding:40px 20px 40px;
}
}

.peace_studies p{
margin-top:0;
padding-left: 20px;
}
@media screen and (max-width: 1199px) {
.peace_studies p{
padding-left: 10px;
}
}
@media screen and (max-width: 767px) {
.peace_studies p{
padding-left:  0;
}
}

/*------------------------------------------------------
  CHURAEN KAINA
-------------------------------------------------------*/
.add-heading{
font-family: "Shippori Mincho", serif;
font-weight: 400;
color:#00A0C0;
font-size: 1.8125rem;
margin-top:15px;
padding: 0;
line-height: 0.9;
letter-spacing: 0.06em;
text-align:center;
}
@media (max-width: 767px) {
.add-heading{
font-size:70% !important;
}
}
.churaen p{
max-width: 800px;
width: 88%;
margin:20px auto 50px !important;
height: auto;
line-height: 220%;
text-align: left;
}

.vision{
max-width:920px;
width: 62%;
margin:50px auto 50px !important;
padding:24px 0 1px;
background:linear-gradient(rgba(255,255,255,0.5)), url("../img/churaen/hibiscus5.png");
background-size: 120% 120%, cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 30px;
}
.vision-title{
font-family: "Shippori Mincho", serif;
color:#582E02;
padding:5px 2px 5px;
font-size: 1.5rem;
letter-spacing: 0.07em;
line-height: 1.2;
font-weight:500;
margin:0 0 15px; 
}
@media (max-width: 767px) {
.vision{
width: 90%;
}
}
h2 {
font-size: 1.625rem;
letter-spacing: 0.07em;
line-height: 1.2;
}

.vision p{
font-size: 106%;
color:#582E02;
font-family: "Klee One", cursive;
margin-bottom:15px;
text-align: center;
}

.activities{
max-width:820px;
width: 95%;
margin:50px auto 50px !important;
padding:40px 0 40px;
text-align: center;
background:linear-gradient(rgba(255,255,255,0.5));
border-radius: 30px;
}
.activities ul{
color:#582E02;
width: 90%;
margin:0px auto 5px !important;
text-align: left;
}
.activities li{
font-family: "Klee One", cursive;
margin:5px auto !important;
padding:5px 6% 0px 8%;
text-align: left;
}
.activities p{
color:#582E02;
font-size: 105%;
margin:45px auto 10px !important;
font-weight: 600;
padding:5px 2% 5px 2%;
line-height: 160%;
text-align: left;
}
@media screen and (max-width: 767px) {
.activities{
max-width:820px;
width: 95%;
margin:50px auto 50px !important;
padding:40px 0 40px;
}
.activities ul{
width: 98%;
}
}
.churaen-wish {
margin:50px auto 40px !important;
text-align: center;
}
.churaen-wish p {
font-family: "Klee One", cursive;
color:#582E02;
font-size: 112%;
line-height: 210%;
font-weight: 500;
text-align: center !important;
}
@media screen and (max-width: 767px) {
.churaen-wish p{
font-size: 108%;
line-height: 200%;
margin:35px auto 10px !important;
padding:40px 0.5% 5px 0.5%;
}
}
.list{
width: 76%;
height: auto;
font-size:.9375rem;
color:#582E02;
margin:50px auto 5px;
border:#8A4B0B solid 1px;
padding:15px 20px 12px;
line-height: 100%;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.list{
width: 86%;
margin:35px auto 10px;
}
}
.list img{
vertical-align: middle;
}
.list a{
text-decoration:underline; 
color:#6A3601 !important; 
}

/* -- ORGANIZER --*/ 
.organizer {
width: 100%;
margin:0;
height: auto;
padding: 50px 150px 80px;
margin-top:0;
margin-bottom: 0px;
background-image: url("../img/churaen/back_sea.jpg");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
@media screen and (max-width: 767px) {
.organizer {
padding: 50px 30px 70px;
}
}
.organizer-title{
font-family: "Shippori Mincho", serif;
color:#019bbc;
padding:15px 2px 5px;
font-size: 1.25rem;
letter-spacing: 0.03em;
line-height: 1.2;
font-weight:500;
margin:0 0 15px; 
}
@media screen and (max-width: 1199px) {
.organizer-title{
font-size: 1.0625rem;
}
}
.name{
margin:20px auto 15px;
 font-size:108%;
 text-align: center !important;
}
.organizer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px 80px;
}
@media screen and (max-width: 1199px) {
.organizer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px 50px;
}
}
.organizer-grid  p{
text-align: left;
}
.organizer-box {
 margin-top:20px;
 border-radius: 20px;
	padding: 0 5px 10px;
 overflow: hidden;
 background-color: #fff;
	border: solid 1px #019bbc;
}
.organizer-box p{
font-size:1rem !important;
text-align: left;
margin-bottom: 15px !important;
line-height: 180%;
}
@media screen and (max-width: 1199px) {
.organizer-box {
	padding: 0 0 10px;
}
.organizer-box p{
font-size:.9375rem !important;
}
}

.post{
width: 88%;
font-size:86% !important;
margin: 4px auto 15px !important;
line-height: 150%;
text-align: center;
}
@media screen and (max-width: 767px) {
.post{
width: 95%;
font-size:95% !important;
}
}


/*------------------------------------------------------
  ABOUT
-------------------------------------------------------*/
.about-intro{
padding:0 20px;
}
.about-intro img{
max-width: 82%;
height: auto;
text-align: center;
}
.about-intro p{
max-width: 870px;
margin:30px auto 20px !important;
height: auto;
line-height: 200%;
text-align: left;
}
.business-info{
max-width:920px;
width: 68%;
margin: 50px auto;
padding:0;
text-align: center;
}
.business-info table{
 background:#fbfaf8;
}
.business-info th,
.business-info td {
 padding: 18px 20px 18px 25px;
 border: none;
	 background:#fbfaf8;
}
.business-info th {
 width: 16%;
}

/* sp */
@media screen and (max-width: 767px) {
.business-info{
max-width:750px;
width: 94%;
margin: 50px auto;
text-align: center;
}
.business-info th,
.business-info td {
 width: 100%;
 display: block;
	font-size: 93%;
  }
.business-info th {
 width: 100%;
  }
.business-info td {
 padding-top: 0;
 }
}

/*-- GOOGLE MAP --*/
.map {
position: relative;
padding-bottom: 55%; /*-- 縦横比 --*/
height: 0;
overflow: hidden;
margin: 15px 8px 0px 0;
}
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 96% !important;
}
@media (max-width: 767px) {
.map {
margin-top:0px;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 70%; /*-- 縦横比 --*/
}
}
	
.profile{
width: 100%;
text-align: left;
margin:10px auto 0px;
padding:30px 0 50px; 
background: #FCFAEF;
}

.prof{
max-width:820px;
width: 95%;
margin:50px auto 50px !important;
padding:40px 40px 40px;
text-align: center;
background: #ffffff;
border-radius: 10px;
}
.prof-title{
font-family: "Shippori Mincho", serif;
color:#582E02;
padding:5px 2px 5px;
font-size: 1.8rem !important;
letter-spacing: 0.07em;
line-height: 1.2;
font-weight:400;
margin:10px 0 14px; 
}
@media (max-width: 767px) {
.vision{
width: 90%;
}
}
.prof p{
margin:25px auto 20px !important;
text-align: left;
} 
.prof-img{
float:left;
text-align:left;
}
.prof-img img{
max-width:300px;
height:auto;
margin:20px 30px 20px 30px;
}