@charset "utf-8";




/*---------------------------------------------------------------------
 	foundation 基本設定
 ---------------------------------------------------------------------*/
body{
	color: #303030;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
}


/*--------------- 文字の色 start ----------------*/
.colorRed{
	color: #ff3434;
}
.colorBlue{
	color: #003f96;
}
.colorGray{
	color: #adadad;
}
.colorYellow{
	color: #deff00;
}
.colorWhite{
	color: #fff;
}
.colorAqua{
	color: #0093b2;
}
/*--------------- 文字の色 end ----------------*/


/*--------------- 基本レイアウト start ----------------*/
.content-wrap{
padding: 0px 25px 0 25px;
word-wrap: break-word;
}
body{
font-size: .95em;
}
h4 {
margin: 4em 0 1.2em 0;
}
h5 {
margin: 8em 0 1.2em 0;
}
.nosp {
margin: 0 1em 1.2em 0;
}
h6 {
margin: 1em 0 0.5em 0 ;
}				}


@media screen and (min-width: 481px) and (max-width: 1023px) {
h4 {
margin: 2.5em 0 1.5em 0;
}
h5 {
margin: 6em 0 0.5em 0;
}
}

@media screen and (max-width:480px){
h4 {
margin: 1.5em 0 1.5em 0;
}
h5 {
margin: 4em 0 0.5em 0;
}
}
.topimg{
background: #fff;
}
.topimg img{
width :100%;
height: auto;
}

/*--------------- 基本レイアウト end ----------------*/


/*--------------- フレックス start ----------------*/
#commentBox {
margin: 12em 0 5em 0;
}
#flexcontent {
display: flex;
margin: 0em 1em 4em 1em;
border: solid 0px #999;	
align-items: flex-start;
}
#mainboxA {
flex: 1;
order: 1;
text-align: center;
}
#subboxA {
flex: 2;
order: 2;
margin: 0 0 0 1.25em;
}
#mainboxB {
flex: 1;
order: 2;
text-align: center;
}
#subboxB {
flex: 2;
order: 1;
margin: 0 1.25em 0 0;
}
#mainboxA img,#mainboxB img {
width: 85%;
height: auto;
border-radius: 5px 5px 5px 5px;
}

#flexcontent p .nomal{
font-size: 0.95em;
display: inline-block;
text-align: left;
}

#flexcontent p .bold{
color: #003f96;
font-size: 1.75em;
font-weight: bold;
}
#flexcontent ul {
padding: 0 0 0 0;
text-indent: -1em;
padding-left: 1em;
}
#flexcontent ul li{
font-size: 0.95em;
}
@media screen and (min-width: 721px) and (max-width: 1024px){
#commentBox {
margin: 10em 0 3em 0;
}
#mainboxA {
padding: 0 ;
flex: 2;
order: 1;
text-align: right;
}
#mainboxB {
padding: 0 ;
flex: 2;
order: 2;
}
#subboxA {
padding: 0 0 0 0.5em;
flex: 3;
order: 2;
}
#subboxB {
padding: 0 0.5 0 0em;
flex: 3;
order: 1;
}
}

@media screen and (max-width:720px){
#commentBox {
margin: 120px 0 9em 0;
}
#flexcontent {
display: block;
margin: 0px 0.5em 3em 0.5em;
}
#mainboxA,#mainboxB {
padding: 0;
margin: 0;
text-align: center;
}
#mainboxA img,#mainboxB img {
width: 50%;
height: auto;
margin: 0 0 1em 0;
border-radius: 350px 350px 350px 350px;
}
#subboxA,#subboxB {
padding: 0;
text-align: left;
margin: 0 2em ;
]
}
/*--------------- フレックス end ----------------*/

/*--------------- 水平線 start ----------------*/
.text-divider {
margin: -0.25em 0 0.5em 0;
display: flex;
align-items: center;
--text-divider-gap: 1.25rem;
font-weight: ;
font-size: 1.25em;
color: #333;
}
.text-divider::before,
.text-divider::after {
content: "";

height: 2px;
background-color: #61c1be;
flex-grow: 1;
}
.text-divider::before {
margin-right: var(--text-divider-gap);
}
.text-divider::after{
margin-left: var(--text-divider-gap);}
}

/*--------------- 水平線 end ----------------*/


/*--------------- レポ枠 start ----------------*/
#reportContent,#txtbox {
font-size: 1em;
margin: 0 0 5em 2.5em;
}
#txtbox ul li{
line-height: 1.9em;
}

#photobox {
flex: 3.75;
}
#photobox img{
margin: 1em 0;
border-radius: 7px 7px 7px 7px;
}



@media screen and (min-width: 721px) and (max-width: 1024px){
#reportContent,#txtbox {
font-size: 1em;
margin: 0 2em 1em 1.5em;
}
}

@media screen and (min-width:481px)and (max-width: 720px){
#reportContent {
display: block;
}
#reportContent,#txtbox {
margin: 0 0 5em 0;
}
}

@media screen and (max-width:480px){
#txtbox {
margin-left: -1em ;
}
#reportContent,#txtbox {
margin: 0 0 7em 0;
}
}

/*--------------- レポ枠 end ----------------*/


/*--------------- says flex start ----------------*/

.bpbox{
 display: flex;
background-color: #fff;
}
.balloonPhoto{
background-color: #fff;
flex: 1 0 30%;
margin: 11em 0 0em 1.25em;
align-self: flex-start;
}
.balloonPhoto img{
width: 100%;
border-radius: 2%;
}

@media screen and (max-width: 1150px){
.bpbox{
 display: block;
}
.balloonPhoto{
flex: 1 0 30%;
margin: 4em 0 0 0;
 display: flex;
}
.balloonPhoto img{
width: 50%;
}
}
@media screen and (max-width: 480px){
.bpbox{
 display: block;
}
.balloonPhoto{
flex: 1 0 30%;
margin: 5em 0 0 0;
 display: block;
}
.balloonPhoto img{
width: 100%;
}
}
/*--------------- says flex end ----------------*/


/*--------------- says start ----------------*/
.balloonBox{
width: 100%;
background-color: #fff;
flex: 1 0 70%;
}
.balloonBox h5{
margin: 4em 0 1.2em 0;
}
.balloon {
margin: 2.5em 0;
display: flex;
}
.balloon .icon {
padding-right: 1em;
margin-right: -90px;
width: 80px;
align-self: center;
}
.balloon .icon img {
width: 100%;
height: auto;
borer: solid 3px #d7ebfe;
border-radius: 2%;
}

.balloon .chatting {
width: 100%;
align-self: center;
}
.says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
border: 2.5px solid #22aaaa ;
background: #fff ;
}

.says:before {
content: " ";
position: absolute;
top: 50%;
left: -23.5px;
margin-top: -12px;
border: 12px solid transparent;
border-right: 12px solid #fff ;
z-index: 2;
}
.says:after {
content: " ";
position: absolute;
top: 50%;
left: -30px;
margin-top: -14px;

border: 14px solid transparent;
border-right: 14px solid #22aaaa ;
z-index: 1;
}

/* .says:after {
content: " ";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #22aaaa ;
} */
.says p {
color: #555;
margin: 0;
padding: 0;
line-height: 1.5 ;	
}
.says p em {
font-size: 12px;
}
.says p strong {
font-size: 18px;
line-height: 1.5;
}
/*--------------- says end ----------------*/



/*--------------- 要項レイアウト補正 start ----------------*/
.withLine-type th{
width: 100px;
padding: 7px 0px;}

@media screen and (max-width: 480px) {
#photobox {
margin: 0;
background-color: #fff;
}
.withLine-type th{
padding: 30px 0 0 0;
}
.withLine-type td{
padding: 3px 0 3px 10px;
}
.withLine-type td::before{
width: 0px;
top: 0px;
}
}
/*--------------- 要項レイアウト補正 end ----------------*/


/*--------------- imgアニメーション start ----------------*/

#stage {
position: relative;
margin: 0.6em auto;
background:#fff;
max-width: 990px;
min-width: 240px;
}


.pic {
position: absolute;
width: 100%;
}
.pic img {
width: 100%;
height: auto;
border-radius: 3px 3px 3px 3px;
opacity:0;
-moz-animation: imgTrans 10s infinite;
-webkit-animation: imgTrans 5s ease-in infinite;
animation: imgTrans 10s infinite;
}
#photo1 img {
-moz-animation-delay: 5s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}

@-webkit-keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}


/*--------------- imgアニメーション end ----------------*/