@charset "UTF-8";
header, footer, a, h1, h2, h3, h4, span, articles, article {font-family: 'Noto Sans JP', sans-serif;}
.date, .error, .sub, .page1, .page2, .mokuzi {font-family: 'Noto Sans JP', sans-serif;}
.html, .headers, .box, .sub, .ctg, .ctg2, .ctg3 { background: #eee;}
.ctgpt, .ctgspc .spaces, header, body, footer { background: white;}
.page1, .page2, .box, .ctg, .ctg2, .ctg3 {display: inline-block;}
.page, .title, .box {text-align: center;}

html {/*記事ページHTML*/
    max-width: 65%;
    margin: 0 auto;
    background: #eee; 
}

.html {/*メインページ用HTML*/
    max-width: 80%;
    margin: 0 auto; 
}

body {
    padding: 0 4% 0 4%;
    margin-top: 0;
    margin-bottom: 0;
    color: black;
}

header {/*トップメニュー*/
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.headers {/*コンテンツ背景枠*/
    height: 50px;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
    
footer {/*最下部フッター*/
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 1px 0 10px 0;    
}
    
p {/*本文の行間調整*/
    line-height: 1.8em;
    font-family: sans-serif;
}
/*本文内容リンク*/
a:link, a:visited {
    font-weight: bold;
    color: #4a4a4a;
    text-decoration: underline;
}

a:hover, a:active {
    color: gray;
    font-weight: bold;
    text-decoration: none;      
}

.title {/*サイトタイトル名*/
    font-size: 2.5em;/*フォントサイズ*/
    letter-spacing: 0.1em;
    font-weight: bold;
    padding: 10px 0 60px 0;
}  

.title a:link, .title a:visited, nav a:link, nav a:visited {
    color: #3e3e3e;
    text-decoration: none;
}

.title a:hover, .title a:active, nav a:hover, nav a:active {
    color: gray;
    text-decoration: none;      
} 

nav li { /*ナビゲーションバー*/ 
    list-style-type: none;/*デコレーション表示解除*/
    display: inline-block;/*リストを横並び表示*/
    padding: 20px 50px 0 0;
}

nav ul { font-size: 1.1em;}

.mokuzi { /*記事の目次*/
    width: 50%;
    margin: 30px auto 65px; 
}

.mokuzi li { font-size: 1.04em;}

ol {
    padding-bottom: 5px;
    border-top: solid 2px;
    border-bottom: solid 2px;
}

ol li {
    margin: 13px 0 7px -30px;
    padding-bottom: 2px;
    list-style-position: inside;
    border-bottom: solid 1px #9a9a9a;
    line-height: 1.5em;
}

ol a:link, ol a:visited {
    color: #3a3a3a; 
    text-decoration: none;
}

ol a:hover, ol a:active {
    color: gray;
    text-decoration: none;      
}      

h1 {/*記事題名*/  
    margin: 35px 0 25px 0;
    text-align: center;
    font-size: 1.7em;
    padding: 0.2em 0;/*文字の上下 左右の余白*/
    color: #2a2a2a;/*文字色*/
    border-bottom: solid 3px #acacac;/*下線*/
    border-top: solid 3px #acacac;/*下線*/
    max-width: 100%;
}

h2 {/*サブ題名*/
    font-size: 1.45em;
    border-bottom: solid 2px #9a9a9a;
    padding-bottom: 2px;
    margin: 60px 0 16px;
}

h3 {/*トップページ題名*/
    letter-spacing: 0.2em;
    font-size: 1.5em;
    text-align: center;
    padding-top: 25px;
}

h4 {/*トップページ英語用題名*/
    font-size: 0.9em;
    text-align: center;
    color: gray;
    letter-spacing: 0.3em;
    margin: -15px 0 35px 0;
    font-weight: normal;
}

.gadget {/*人気の記事の写真*/
    transition: all 0.3s;
    width: 73vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 40px;
}

.gadget:hover { opacity: 0.7; filter: brightness(100%); }

span {/*本文強調文字*/font-weight:bold;/*太字*/}

.date {/*記事最下部日付*/
    text-align: right;
    padding-right: 10px;
}

.error {/*404 Error*/
    font-size: 70px;
    font-weight: bold;
    color: red;
    animation: blink 0.3s ease-in-out infinite alternate;
}

@keyframes blink{/*404 Error点滅用*/
    0% {opacity:0;}
    100% {opacity:1;}
}

.photo {/*記事内写真*/margin: 35px 0 19px 0;}
.photos {/*記事内サブ題名直下写真*/ margin: 10px 0 19px 0;}
.photoes, .photo, .photos {/*記事メイン写真*/width: 100%;}

.main {/*トップページ宣材写真*/
    width: 78.9vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/*表CSS*/
table { 
font-family: sans-serif;
border-collapse: collapse;/*2重線の解除*/}

table th, table td {
    padding: 8px;/*表余白*/
    border: 1px solid #cecece;/*枠線色*/
    text-align: left;/*左寄*/
}

table th {
    background-color: #eee;
    width: 180px;
    vertical-align: middle;
}

/*記事一覧CSS*/
.images {border-radius: 5px 5px 0 0;}/*記事一覧画像上部丸み*/
.images, .ponta { /*記事一覧画像*/max-width: 100%;}
.ponta { /*トップページ用記事一覧画像*/box-shadow: 2px 2px 2px rgba(82, 82, 82, 0.5);}

section {/*記事一覧,カテゴリー写真用大枠*/
	display: flex;
	flex-wrap: wrap;
}

article {/*記事一覧*/
	box-shadow: 0  0 10px gray;
    border-radius: 5px;/*角の丸み*/
}

articles, article {/*新着情報*/
    transition: all 0.3s;
	margin: 0 2% 20px 0;
	width: 32%;
    padding: 0;
}

articles .kizi { margin-left: -10px;}
articles .kiji { margin-left: -11px;}
articles .box { margin-left: 1px;}

article:nth-child(3n), articles:nth-child(3n) { margin-right: 0;}

.kiji {/*記事一覧　タイトル*/
    padding-right: auto;
    margin-top: -2px;
    padding: 0px 0px 12px 13px;
    font-size: 1.1em;
    font-weight: bold;
    color: #303030;
}

.box {/*記事一覧　カテゴリー用*/
    float: left;
    font-weight: bold;
    font-size: 0.75em;
    color: gray;
    border-radius: 4px;
    margin-left: 11px;
    padding: 0px 6px 2px 5px;
}

.kizi {/*記事一覧日付*/
    font-family: sans-serif;
    font-weight: normal;
    padding: 8px 0 0 13px;
    font-size: 0.8em;
    margin-bottom: 3px;
    color: #808080;
}

article:hover, articles:hover { opacity: 0.5; filter: brightness(100%); }

article a:link, article a:visited, article a:hover, article a:active { text-decoration: none; }
articles a:link, articles a:visited, articles a:hover, articles a:active { text-decoration: none;}

.sub {/*別枠CSS*/
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 200px;
    padding: 0.5em 0.7em;
    max-width: 60%;
    margin: 20px auto;
    color: #505050;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.8em;
}

.category {/*トップページカテゴリ写真*/
    transition: all 0.7s;
    float: left;
    width: 48%;
    margin: 0 1% 2% 1%;
}

.category:hover { opacity: 0.7; filter: brightness(80%); }

.ctgimg { /*カテゴリ一覧画像*/max-width: 100%;}

.ctg, .ctg2, .ctg3 {/*カテゴリー分けCSS*/
    padding: 0.001em 0.4em 0.03em;
    margin-bottom: 25px;
    color: #505050;
    font-weight: bold;
    line-height: 1.8em;
}

.ctg {/*トップページ用カテゴリ*/
    margin-bottom: 15px;
    font-size: 0.92em;
}

.ctg2 {/*記事一覧用カテゴリ*/
    font-size: 0.98em;
    margin: -10px 3px 0px 0;
}

.ctg3 {/*記事本文用カテゴリ*/
    font-size: 0.95em;
    margin: -15px 0 8px 0;
}

.about { height: 5px;}
.ctgspc { height: 24px;}
.spaces{ height: 10px;}
.ctgpt {height: 3px;}
.final {/*フッター部余白*/height: 30px;}
.finals {/*お知らせ部余白*/height: 15px;}

.ctg a, .ctg2 a, .ctg3 a, .page2 a { text-decoration: none;}

.page {font-size: 1.3em;}/*記事一覧ナンバー*/

.page1 {/*記事一覧ナンバー本ページ*/
    border: solid 1.9px #a0a0a0;
    color: #a0a0a0;
    padding: 0 11px 3px 11px;
}

.page2 a { /*記事一覧ナンバー他ページ*/
    font-weight: 100;
    padding: 0 11px 0 11px;
}

.page2 a:link, .page2 a:visited, .page2 a:active { color: black;}
.page2 a:hover { color: gray;}  

/* スマートフォン向けCSS */
@media (max-width: 850px) {

    .html, html {
    max-width: 100%;
    margin: 30px auto 0 auto;
    }
    
    p { 
    font-size: 0.9em;
    line-height: 1.6
    ;}
    
    nav li {
    white-space: nowrap;
    display: table-cell;
    vertical-align: middle;
    margin-top: 4px;
    padding: 2px 5px 2px 5px;
    border-right: 5px solid #f2f2f2;
    border-left: 5px solid #f2f2f2;
    }   
  
    nav ul {
    display: table;
    table-layout: fixed;
    text-align: center;
    font-size: 1.0em;
    width: 100%;
    padding: 5px 0px 5px;/*余白*/
    background-color: #f2f2f2;
    }
    
    .mokuzi {
    width: 95%;
    margin: auto auto 35px auto;
    }
    
    ol a:hover { color: #3e3e3e;}
    
    .mokuzi li { font-size: 0.97em;}
 
    .title { 
    font-size: 1.8em;
    padding: 22px 0 44px 0;
    }
    
    section { margin-top: -8px}
    
    .images {border-radius: 0 0 0 0;}
    
    .images, .ponta { /*記事一覧画像*/
    max-width: 40%;
    float: left;
    margin: 10px 15px 0 0;
    box-shadow: 2px 2px 2px rgba(62, 61, 61, 0.5);
    }
    
    article, articles {
	width: 100%;
    margin-bottom: 8px;
    line-height: 1.3em;
    box-shadow: none;
    }
    
    .category {
    width: 98%;
    margin-top: 2%
    }
    
    .kiji{　/*記事一覧　タイトル*/
    font-weight: bold;
    font-size: 0.95em;
    padding-top: 3px;
    margin-bottom: -14px;
    }
    
    .box {　/*記事一覧　カテゴリー*/
    font-weight: bold;
    font-size: 0.7em;
    color: gray;
    background: #eee;
    border-radius: 4px;
    padding: 0px 5px 0px 5px;
    margin: 1px 0 0 -2px;
    }
    
    articles .box{ margin-left: -2px;}
    
    .kizi {/*記事一覧日付*/margin: -3px 0px 0px 0px;}
    
    h1 {
    font-size: 1.3em;
    margin: 25px 0 25px 0;
    padding: 0.2em 0;/*文字の上下 左右の余白*/
    border-bottom: solid 2px #acacac;/*下線*/
    border-top: solid 2px #acacac;/*下線*/
    }
    
    h2 {/*サブ題名*/
    font-size: 1.2em;
    border-bottom: solid 2px #9a9a9a;
    margin: 50px 0 0px 0;
    }   
    
    h3 {
    font-size: 1.24em;
    margin: -2px 0 30px 0;
    padding-top: 33px;
    }
    
    h4{
    font-size: 0.8em;
    margin: -23px 0 30px 0;
    }
     
    .gadget {/*ホーム写真*/
    width: 96vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 40px;
    }

	.wrapper {/*左右余白*/margin: 0 3px;}
    
    .main {/*メインページ写真*/
    position: none;
    left: 0%;
    transform: translateX(0%);
    }
    
    .photoes, .main{/*記事メイン写真*/
    margin: 0 calc(50% - 50vw);
	width: 100vw;
    }
    
    .photo{/*記事内写真*/
    width: 100%;
    margin-bottom: 17px;
    }
    
    .photos {/*記事内サブ題名直下写真*/ 
    width: 100%;
    margin: 5px 0 19px 0;
    }

    body { padding: 0;}
    
    table th, table td { font-size: 0.9em;}
    table th { width: 90px;}
    table th, table td {padding: 6px 8px 6px 8px;/*表余白*/}
    
    .sub {
    max-width: 92%;
    font-size: 0.97em;
    }

    .ctg, .ctg2 {font-size: 0.85em;}
    .ctg3 {font-size: 0.8em;}
    
    .ctg { margin: 15px 0 -20px 0;}
    .ctgspcs { margin-top: -3px;}
    
    .headers { height: 55px;}
    .space {/*新着情報最下部余白*/height: 35px;}
    .ctgspc { height: 18px;}
    .spc { height: 8px;}
    .final {/*フッター部余白*/height: 10px;}
    
    .page { font-size: 1.1em;}
    
    .ctgspcs, .ctgspc, .space, .spc, nav li, .html, html { background: white;}
    
    footer{ padding-top: 7px;}
    }