@charset "UTF-8";
/* HARAPEKO＜レスポンシブ＞ */

/* Micro clearfix */

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }



article{
margin:0;
padding:0;
}

/* Pの文字割付け */
p{
text-align: justify;
text-justify: inter-ideograph;
font-weight: 400; /* normal */
}

/* 表の文字太さ */
table th{
font-weight: 400; /* normal */
}
table td{
font-weight: 400; /* normal */
}


hr.linesolid{
border: none;
border-bottom: 1px solid #000000;
height: 1px;
margin:30px 0px;
}


/* 基本設定　ページ全体 */
body {
font-size:14px;
font-family: sans-serif;
font-weight: 400; /* normal */
margin:0;
padding:0;
line-height: 1.6;
background-color:#ffffff;
 font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

/* 文字情報-一覧-表 */

h1{font-size:20px;margin:15px 0px 5px 0px;font-weight: 700; /* bold */}
h2{font-size:20px;margin:30px 0px 5px 0px;font-weight: 700; /* bold */}
h3{font-size:16px;margin:0px 0px 10px 0px;font-weight: 700; /* bold */}
h4{font-size:14px;margin:0px 0px 5px 0px;font-weight: 700; /* bold */}
h5{font-size:12px;margin:0px 0px 5px 0px;font-weight: 700; /* bold */}
.gf-rc{font-family: 'Roboto Condensed', sans-serif;}
.size10{font-size:10px;}
.size11{font-size:11px;}
.size12{font-size:12px;}
.size13{font-size:13px;}
.size15{font-size:15px;}
.size16{font-size:16px;}
.size18{font-size:18px;}
.size20{font-size:20px;}
.size25{font-size:25px;}
.slim{font-weight:normal;}
.color-blue{color:#4DBAA9;}
.color-gray{color:#959595;}
.color-white{color:#ffffff;}
.weight-bold{font-weight: 700; /* bold */}

.top0{margin-top:0px;}
.top3{margin-top:3px;}
.top5{margin-top:5px;}
.top10{margin-top:10px;}
.top15{margin-top:15px;}
.top20{margin-top:20px;}
.top30{margin-top:30px;}
.top40{margin-top:40px;}
.top50{margin-top:50px;}
.bottom0{margin-bottom:0;padding-bottom:0}
.bottom10{margin-bottom:10px;}
.bottom20{margin-bottom:20px;}
.bottom30{margin-bottom:30px;}
.bottom40{margin-bottom:40px;}
.bottom50{margin-bottom:50px;}
.bottom100{margin-bottom:100px;}
.ichi-center{text-align:center;}
.ichi-right{text-align:right;}
.ichi-left{text-align:left;}

/* 中央揃え */
.textcenter{
text-align:center;
}
/* 左揃え */
.text_left{
text-align:left;
}
/* 左揃え */
.text_right{
text-align:right;
}

img{
vertical-align:top;
}

a{
color:#000000;
text-decoration:underline;
}
a:hover{
color:#01b5c1;
text-decoration:underline;
}


/* サンセリフ */
.sans-serif{
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;
}





/* ヘッダー */
header{

}
header .container{
}



/* 幅900 */
.w900{
width:100%;
margin:0 auto;
}
/* 幅700 */
.w700{
width:90%;
margin:0 auto;
}
/* 幅500 */
.w500{
width:90%;
margin:0 auto;
}
/* 幅400 */
.w400{
width:90%;
margin:0 auto;
}
/* 幅720 */
.w720{
width:90%;
margin:0px auto 0px auto;
text-align:center;
background: transparent;
}
/* 幅980 */
.w980{
width:90%;
margin:0px auto 0px auto;
text-align:center;
background: transparent;
}


/* ページトップ */
.pagetop {
	display: none;
	position: fixed;
	bottom: 70px;
	right: 0px;
	z-index:100;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #000000;
	font-size: 24px;
	text-decoration: none;

}

/* HARAPEKOロゴ */
.logo{
width:100%;
margin:25px auto 25px auto;
text-align:center;
}
.logo img{
width:75%;
max-width:475px;
}

/* 島 */
.shima{
width:100%;
margin:0px;
padding;0px;
text-align:center;
background:#00b5c1;
}
.shima img{
width:100%;
}
	
/* 島の物語 */
.modal-content{
}
.modal-content img{

}



/* 背景1　森 */
.bg1-mori{
width:100%;
background: #ffffff ;
}
/* 背景2　森 */
.bg2-mori{
width:100%;
background: #ffffff ;
}


/* 導入文 */
.monogarari-read{
font-size:13px;
}

/* コンテンツ画像 横位置 */
img.img-yokoichi{
width:100%;
margin:15px auto 0px auto;
text-align:center;
background: transparent;
}

/* 項目の見出し */
h2 img{
width:100%;
max-width:520px;
}

/* キャラクター3カラム */
.chara-3column{
margin:0px auto;
width:90%;
}
.chara-uni{
margin-bottom:20px;
padding-top:10px;
}
.chara-uni:last-child{
margin-bottom:20px;
}
.chara-uni h3{
font-size:18px;margin:0px 0px 5px 0px;font-weight: 700; /* bold */
}
.chara-uni p{
margin-top:10px;
}
.chara-uni img{

}
img.paiekun-img{
margin-top:0px;
}



/* youtube埋め込み　aspect-ratio */
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}



/* 商品紹介2カラム */
.ep1-book{
background: #ffffff;
padding:15px 15px 15px 15px;
margin:0 auto;
text-align:left;
width:90%;
}
.ep1-book-2column{
flex:1;
}
.ep1-book-2column:first-child{
margin-right:0px;
}
.ep1-book img{
width:100%;
}
.product-icon{
margin-top:10px;
}


/* 絵本写真切り替え */
ul.bookphoto{
list-style-type: none;
margin:2px 0px 0px 0px;
padding:0px;
display: -webkit-flex;
    display: flex;
}
ul.bookphoto li{
float:left;
margin:0px;
padding:0px;
    -webkit-flex: 1;
    flex: 1;
}

/* プロフィール黒背景 */
.profile-bg{
background: #000000 url(../img/smp-profile-bg.png) no-repeat right top;
margin:50px 0px 0px 0px;
color:#ffffff;
padding:30px 0px;
}
	
/* プロフィール3カラム */
.profile{
color:#ffffff;
padding:15px 15px 15px 15px;
margin:0 auto;
text-align:left;
width:90%;
}
.profile-3column-1{
margin: 0px 15px 0px 0px;
text-align:left;
}
.profile-3column-2{
margin: 20px 0px 30px 0px;
}
.profile-3column-3{
margin: 0px 0px 0px 0px;

text-align:left;
}
.profile-3column-3 img{
width:100%;
}



/* 2カラム　50・50 */
.hanbun-left{
width:90%;
text-align:center;
font-size:11px;
margin-bottom:20px;
}
.hanbun-right{
width:90%;
text-align:center;
font-size:11px;
}

/* 自画像　表示非表示 */
img.jigazou-pc{
margin:0px;
display:none;
}
img.jigazou-smp{
margin:0px;
display:block;
}




/* レスポンシブ・ブレークポイント */
	
@media(min-width:768px){




/* 幅900 */
.w900{
width:900px;
margin:0 auto;
}
/* 幅700 */
.w700{
width:700px;
margin:0 auto;
}
/* 幅500 */
.w500{
width:500px;
margin:0 auto;
}
/* 幅400 */
.w400{
width:400px;
margin:0 auto;
}
/* 幅720 */
.w720{
width:720px;
margin:50px auto 0px auto;
text-align:center;
background: transparent;
}
/* 幅980 */
.w980{
width:980px;
margin:0px auto 0px auto;
text-align:center;
background: transparent;
}



/* ページトップ */
.pagetop {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 0px;
	z-index:100;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #000000;
	font-size: 24px;
	text-decoration: none;

}

/* HARAPEKOロゴ */
.logo{
width:100%;
margin:30px auto 30px auto;
text-align:center;
}
.logo img{
width:100%;
max-width:450px;
}


/* 島 */
.shima{
width:100%;
margin:0px;
padding;0px;
text-align:center;
background:#00b5c1;
}
.shima img{
width:100%;
max-width:980px;
margin:15px 5px:
}



/* 背景1　森 */
.bg1-mori{
width:100%;
background: #ffffff url(../img/bg1.png) repeat-x center 88px;
}
/* 背景2　森 */
.bg2-mori{
width:100%;
background: #ffffff url(../img/bg2.png) repeat-x center top;
}


/* 導入文 */
.monogarari-read{
font-size:15px;
}

/* 項目の見出し */
.midsshi img{
width:520px;
max-width:520px;
}

/* キャラクター3カラム */
.chara-3column{
display:flex;
align-items:top;
justify-content:space-between;
margin:30px auto 0px auto;
}
.chara-uni{
width:280px;
margin-right:30px;
margin-bottom:40px;
padding-top:10px;
}
.chara-uni:last-child{
width:280px;
margin-right:0px;
margin-bottom:40px;
}
.chara-uni h3{
}
.chara-uni p{
margin-top:10px;
}
.chara-uni img{
}
img.paiekun-img{
margin-top:80px;
}


/* youtube埋め込み　aspect-ratio */
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/* 商品紹介2カラム */
.ep1-book{
background: #ffffff;
padding:20px 20px 20px 20px;
display:flex;
margin:0 auto;
text-align:left;
width:640px;
}
.ep1-book-2column{
flex:1;
}
.ep1-book-2column:first-child{
margin-right:15px;
}
.product-icon{
margin-top:0px;
}


/* 絵本写真切り替え */
ul.bookphoto{
list-style-type: none;
margin:2px 0px 0px 0px;
padding:0px;
display: -webkit-flex;
    display: flex;
}
ul.bookphoto li{
float:left;
margin:0px;
padding:0px;
    -webkit-flex: 1;
    flex: 1;
}


/* プロフィール黒背景 */
.profile-bg{
background:#000000;
margin:50px 0px 0px 0px;
color:#ffffff;
padding:30px 0px;
background-image:none;
}

/* プロフィール3カラム */
.profile{
color:#ffffff;
padding:15px 15px 15px 15px;
margin:0 auto;
display: -webkit-flex;
    display: flex;
text-align:left;
width:980px;
}
.profile-3column-1{
margin: 0px 15px 0px 0px;
    -webkit-flex: 1;
    flex: 1;
text-align:left;
}
.profile-3column-2{
margin: 0px 30px 0px 0px;
    -webkit-flex: 3;
    flex: 3;
}
.profile-3column-3{
margin: 0px 0px 0px 0px;
    -webkit-flex: 1;
    flex: 1;
text-align:left;
}
.profile-3column-3 img{
width:250px;
}



/* 2カラム　50・50 */
.hanbun-left{
width:50%;
float:left;
text-align:left;
font-size:11px;
}
.hanbun-right{
width:50%;
float:left;
text-align:right;
font-size:11px;
}




/* 自画像　表示非表示 */
img.jigazou-pc{
margin:0px;
display:block;
}
img.jigazou-smp{
margin:0px;
display:none;
}





}