body{
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    background-color: #fffacd;
    margin:0;
    padding:0;
}
header{
    background-color: rgba(255,255,255,0.5);
    height:60px;
    padding:25px;
}
footer{
    background-color: rgba(255,255,255,0.5);
    height:30px;
    padding:15px;
}

section{
    width:80%;
    margin:0 auto 50px auto;
    padding:15px;
}

section.phototile2 div{
    width:35%;
    float:left;
    margin:15px 15px 0 15px;
}

iframe{width:35%; margin:20px; vertical-align: middle;}
section img{width:35%; margin:20px; vertical-align: middle;}

h4{
  padding: 1rem 2rem;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#ff69b4), to(#ffff00));
  background-image: -webkit-linear-gradient(left, #ff69b4 0%, #ffff00 100%);
  background-image: linear-gradient(to right, #ff69b4 0%, #ffff00 100%);
}

.clear{clear:both;}

.keikou{
    background: linear-gradient(transparent 75%, #bc8f8f 90%);
}

/*吹き出し*/
.koe {
position: relative;
margin-top: 5px;
margin-bottom: 15px;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
background-color: #afeeee;
border-radius: 50px;
margin-left: 5px;
text-align: center;
}
.koe::before {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: #afeeee;
left: -15px;
bottom: 0px;
width: 15px;
height: 15px;
}
.koe::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: #afeeee;
left: -25px;
bottom: -5px;
width: 10px;
height: 10px;
}

/*手紙*/
.letter {
background: #fffaf0;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 25px auto 0;
max-width: 550px;
min-height: 300px;
padding: 25px;
position: relative;
width: 80%;
text-align: center
}
.letter:before, .letter:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.letter:before {
background: #fffaf0;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.letter:after {
background: #fffaf0;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}

/*タブ*/
.tab_wrap{width:90%; margin:30px auto;}
input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{width:100px; margin:5px 20px; display:inline-block; padding:20px 0; color:#696969; background:#afeeee; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.panel_area{background:#ffffff;}
.tab_panel{width:100%; padding:10px 0; display:none;}
.tab_panel p{font-size:15px; letter-spacing:1px; text-align:center;}
.tab_panel h3{text-align:center;}
.tab_panel h4{text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background:#fff; color:#000;}
#tab4:checked ~ .panel_area #panel4{display:block;}
#tab5:checked ~ .tab_area .tab5_label{background:#fff; color:#000;}
#tab5:checked ~ .panel_area #panel5{display:block;}
#tab6:checked ~ .tab_area .tab6_label{background:#fff; color:#000;}
#tab6:checked ~ .panel_area #panel6{display:block;}
#tab7:checked ~ .tab_area .tab7_label{background:#fff; color:#000;}
#tab7:checked ~ .panel_area #panel7{display:block;}
#tab8:checked ~ .tab_area .tab8_label{background:#fff; color:#000;}
#tab8:checked ~ .panel_area #panel8{display:block;}
#tab9:checked ~ .tab_area .tab9_label{background:#fff; color:#000;}
#tab9:checked ~ .panel_area #panel9{display:block;}


/*ポイント*/
.box {
    position: relative;
    padding: 15px 10px 7px;
    border: solid 1px #FFC107;
}
.point {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box p {
    margin: 0; 
    padding: 0;
}