@charset "UTF-8";
@import url("html5reset-1.6.1.css");
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap');

/*--------------------テンプレート情報--------------------*/
/*template　Maison de R*/
/*url　https://maisonder.web.fc2.com/*/
/*title　Nostalgic Ribbon*/
/*code　CSS3*/

/*--------------------ライセンス--------------------*/

/*HTML5 Reset Stylesheet
html5doctor.com Reset Stylesheet v1.6.1
http://html5doctor.com/html-5-reset-stylesheet/
Copyright Richard Clark - http://richclarkdesign.com
Released under the CC0 Public Domain Dedication and MIT License
http://opensource.org/licenses/mit-license.php
*/

/*
Google Fonts
"Questrial" is lisenced under the SIL Open Font License
http://scripts.sil.org/OFL
by https://fonts.google.com/(Joe Prince)
"Pinyon Script" is lisenced under the SIL Open Font License
http://scripts.sil.org/OFL
by https://www.google.com/fonts(Nicole Fally)
"Libre Baskerville" is lisenced under the SIL Open Font License
http://scripts.sil.org/OFL
by https://www.google.com/fonts(Impallari Type)
*/

/*
Font Awesome(Font License)
"font-awesome" is lisenced under the SIL Open Font License 1.1
http://scripts.sil.org/OFL
https://fontawesome.com/v4.7.0/
*/

/*
Font Awesome(Code License)
https://fontawesome.com/v4.7.0/
Released under the MIT license
https://fontawesome.com/v4.7.0/license/
http://opensource.org/licenses/mit-license.php
*/


/*基本*/

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
word-break: break-all;
-webkit-appearance: none;
-moz-appearance: none;
/*フォーム周辺のデザインをリセット*/
}

html {}

body {font-family: 'Questrial', "メイリオ", Helvetica, serif; font-size:9pt; line-height: 1.6; color: #333; letter-spacing: 0.04em; text-align: left; background: #f1f1f1;
/*モバイル端末でのテキストサイズの自動調整対策*/
-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;}

/*フロート解除*/
.clearfix:after {content: ""; display: block; clear: both;}

.re {margin:1em 0 0; padding: 0 0.5em; background: #fff; color: #bababa; text-align:right; border-radius: 2px;}

ul {list-style-type: none; list-style-position: inside;}

.im {
/*span共通 マーカー風ライン*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(0%, #fff));
background: linear-gradient(transparent 40%, #fff 0%);}

header h1 {font-family: 'Pinyon Script', serif; font-weight: normal; font-size: 4em; line-height: 1.3;}
section h1, nav h1 {font-family: 'Nunito', sans-serif; font-weight: normal; text-align: center; letter-spacing: 0.14em;}

/*テキスト 文字間隔*/
nav ul li {letter-spacing: 0.08em;}

/*ページの枠組み*/
#all {}
.wrap1 {padding: 20px 20px;}
.wrap2 {width: 100%;max-width: 600px;margin: 0 auto;}

/*ヘッダー*/
header {text-align: center;}
.title {}

/*メイン*/
main {margin-top: 30px;}
section {margin-top: 50px;}
section:first-child {margin-top: 0;}
section h1 {font-size: 13px; margin-bottom: 1em;}

a {color: #454545;}

/*セクション リボン*/
.ribbon {display: block; position: relative; height: 30px;
/*リボンの高さ*/
line-height: 30px;
/*リボンの高さ*/
vertical-align: middle; padding: 0 30px;
/*横の大きさ*/
background: #b20000; color: white;
-webkit-box-sizing: border-box; box-sizing: border-box;}

.ribbon:before {top: 0; left: 0; border-width: 15px 0px 15px 15px; position: absolute; content: ''; width: 0px; height: 0px; z-index: 1;
/*1番目と3番目の数値は.ribbonのheightの半分の数値を指定する*/
border-color: transparent transparent transparent #f1f1f1;
/*4番目の色はbodyの色と揃える*/
border-style: solid;}

.ribbon:after {top: 0; right: 0; border-width: 15px 15px 15px 0px; position: absolute; content: ''; width: 0px; height: 0px; z-index: 1;
/*1番目と3番目の数値は.ribbonのheightの半分の数値を指定する*/
border-color: transparent #f1f1f1 transparent transparent;
/*2番目の色はbodyの色と揃える*/
border-style: solid;}


/*本文エリア*/

.text {border-top: solid 1px transparent; line-height: 1.7;
/*マージンの相殺対策*/
padding: 0 1em;}

.text > p, .text > ul, .text > dl {
/*本文エリア タグ間の余白*/
margin-top: 1em;}

.text > p:first-child, .text > ul:first-child, .text > dl:first-child {
/*本文エリア タグ間の余白 先頭の要素を無効*/
margin-top: 0;}


/*ナビ*/

nav {margin-top: 50px;}
nav ul {
/*フレックスコンテナ*/
margin-top: 0.25em; display: -webkit-box; display: -ms-flexbox; display: flex;
/*フレックスボックス*/
-ms-flex-wrap: wrap; flex-wrap: wrap;
/*折り返す*/
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
/*横配置 中央*/}

nav ul li {
/*フレックスアイテム*/
margin: 0.5em 0.5em 0 0;}
nav ul li:last-child {margin-right: 0;}
nav ul li a {display: block;
/*リンク範囲の拡張*/
text-decoration: none; padding: 0.25em 1em; background: #800000; color: #fff9f5; border-radius: 2px;}

/*ナビ 水平線デザインの見出し*/

nav h1 {
/*フレックスコンテナ*/
font-size: 13px; margin-bottom: 1.5em; display: -webkit-box; display: -ms-flexbox; display: flex;
/*フレックスボックス*/
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
/*縦位置 中央*/}

nav h1::before,
nav h1::after {-webkit-box-sizing: border-box; box-sizing: border-box; content: ""; border-top: 3px double #222; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
/*残りの領域を埋める*/}

nav h1::before {margin-right: 1em;}
nav h1::after {margin-left: 1em;}


/*------------画面サイズ768px以上用（大きい画面サイズ向け）------------*/

@media screen and (min-width:768px) {
.wrap1 {padding: 0px 50px 30px;}
.wrap2 {max-width: 850px;}
header h1 {font-size: 5em; margin-top: 0.5em;}
}

/*ベンダープレフィックス記述済*/
/*エラーチェック済*/