@charset "utf-8";

/*使用したwebフォントのライセンスについて*/

/*
 * "Sacramento" is lisenced under the SIL Open Font License 1.1
 * http://scripts.sil.org/OFL
 * by https://www.google.com/fonts(Astigmatic)
 */

@import url('https://fonts.googleapis.com/css?family=Lovers+Quarrel');

@font-face
{
font-family: Fontpoにほんご;
src: url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff2')
     format("woff2");
}

/*共通*/
*{
box-sizing:border-box;
word-break:break-all;
}

/*ボディの基本設定*/
body {
margin: 0;
padding: 0;
background: url(bg.jpg) #E6FDFF;
font-size: 14px;
color: #b4ada9;
font-family: Verdana, "メイリオ", Meiryo,sans-serif;
}

/*clearfix フロート解除*/
.clearfix:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

/*リンクの設定*/
a {
color: #b4ada9;
}

a:hover {
color: #F5BB7D;
}

h1 a {
color: #b4ada9;
}

nav a {
background: #F8FFF0;
}

/*画像のリンクの枠線を消す*/
img {
border-style:none;
}

/*インデックスページへのリンク 下線を消す設定*/
a.indexlink{
text-decoration: none;
}

/*フォント一括設定*/
h1,h2{
font-family: 'Lovers Quarrel', cursive;
font-weight: normal;
}

/*見出しの設定*/
h1 {
font-size: 40px;
line-height:38px;
height: 38px;
}

h2 {
font-size: 33px;
line-height:30px;
height: 30px;
text-align:center;
margin-bottom:30px;
}

/*ヘッダーの挨拶文*/
.bonjour{
margin:30px 0;
}

/*段落の設定*/
p {
font-size: 12px;
}

/*フォントカラーの一括指定*/
em,.bonjour{
color: #9D2932;
}

/*strong要素(重要)*/
strong {
color: white;
background-color: #b55a5a;
}

/*em要素(強調)*/
em {
font-style: normal;
background-color: #f4cbcb;
}

/*各要素をブロックに変換*/
header,nav,article,float{
display: block;
}

/*全体のレイアウト*/
#page {
line-height: 2;
margin: 80px auto;
padding: 0 40px;
width: 960px;
}

/*ヘッダーの設定*/
header {
margin: 0 0 80px 0;
text-align: center;
}

/*ナビゲーションのブロック全体の設定*/
nav{
margin: 30px 0;
}

/*ナビゲーション設定1*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

/*ナビゲーション設定2*/
nav ul li {
padding: 0 12px;
display:inline-block;
border-left: 1px solid;
letter-spacing:0.5px;
font-family: Fontpoにほんご;
}

/*ナビゲーションの最初の区切り線を消す*/
nav ul li:first-child {
border-left: none;
}

/*メインコンテンツ*/
#mainbox {
}

/*左カラム*/
#left{
float:left;
width:530px;
}

/*右カラム*/
#right{
float:right;
width:270px;
}

/*ヘッダーと記事とフッターのボックス一括設定*/
header,article,footer{
padding: 20px;
border-radius: 20px;
background-color: white;
}

/*記事*/
article {
margin: 0 0 80px 0;
background:white;
}

#left article:last-child{
margin-bottom:0;
}

#right article:last-child{
margin-bottom:0;
}

/*記事内のボックス*/
.box1{
margin: 0 20px;
}

/*画像の伸縮設定*/
img { 
    max-width: 100%; 
    height: auto; 
} 

/*タイトル下の画像設定*/
img.mainvisual {
margin-top:10px;
}

/*記事内の画像の設定*/
#mainbox article img {
margin: 10px;
}

/*リスト*/
.list1{
}

/*ページ上部への内部リンク*/
.pagetop {
margin-top: 20px;
text-align: right;
}

/*フッター*/
footer {
margin-top: 80px;
text-align: center;
}
#pfooter{/*配布元表示*/
margin:0;
}

/*狭いブラウザとタブレット向け*/
@media (max-width: 1020px) and (min-width: 768px){

#page {
width: 720px;
}

#left{
float:none;
width:640px;
margin-bottom:40px;
}

#right{
float:none;
width:640px;
}

#left article:last-child{
margin-bottom:40px;
}

#right article:last-child{
margin-bottom:40px;
}

}

/*スマホ向け*/
@media (max-width: 767px) {

body{
width:100%;
font-size:12px;
}

p {
font-size: 12px;
}

h1 {
font-size: 34px;
line-height:34px;
height: 34px;
}

h2 {
font-size: 26px;
line-height:26px;
height: 26px;
}

#page {
margin:40px auto;
width: 80%;
padding:0;
}

header {
margin: 0 0 40px 0;
}

header,article,footer{
padding: 30px;
}

nav ul li {
margin:10px auto;
padding: 0 8px;
display:block;
border-left: 0;
}
nav a {
text-decoration:none;
background: transparent;
}

#left{
float:none;
width:100%;
}

#right{
float:none;
width:100%;
}

#left article:last-child{
margin-bottom:40px;
}

#right article:last-child{
margin-bottom:40px;
}

article {
margin: 0 0 40px 0;
}

.box1{
margin: 0 5px;
}

footer {
margin-top: 40px;
}

}