@charset "UTF-8";

/*

UP DATE : 2017年1月18日
デザインの設定

*/
/*--------------------------------------------------------
header
--------------------------------------------------------*/
/*解像度700px以上〜PC・タブレット用設定〜--*/
@media only screen and (min-width : 700px){
    header .container {
        display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
        flex-direction: row-reverse;
    }
}

/*--共通設定--*/
header h1 {margin: 20px 20px 20px 0;}
header h1 img {max-width: 305px;}

header .inqury {margin: 20px 0 0 0;}

header .inqury span {
    background: #f3f3f3;
    padding: 6px;
}

header .inqury a {
    color: #000;
    text-decoration: none;
}

/*--解像度699px以下〜スマートフォン用設定〜--*/
@media only screen and (max-width : 699px){
    header .inqury span.radius10px span {display: none;}
    
    header h1 {
        margin: 20px 0;
        text-align: center;
    }
}

/*--------------------------------------------------------
グローバルナビゲーション
--------------------------------------------------------*/
header nav ul {
    margin: 20px 0;
}

header nav li:first-child img {
    width: 71px;
    height: auto;
}

header nav li:nth-child(2) img {
    width: 63px;
    height: auto;
}

header nav li:nth-child(3) img {
    width: 56px;
    height: auto;
}

header nav li:last-child img {
    width: 93px;
    height: auto;
}

/*解像度700px以上〜PC・タブレット用設定〜--*/
@media only screen and (min-width : 700px){
    header .tab {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    
    #toggle {display: none;}
    
    header nav li {
        margin: 0 20px 0 0;
        padding: 0 20px 0 0;
        border-right:1px solid #000;
        text-align: center;
    }
    
    header nav li:last-child {
        margin: 0;
        padding: 0;
        border: none;
    }
}

/*--解像度699px以下〜スマートフォン用設定〜--*/
@media only screen and (max-width : 699px){ 
    #menu{
        display: none;
    }
    #menu li{
      width: 100%;
    }
    
    header nav li {
        border-bottom:1px dotted #ccc;
        text-align: center;
        padding: 10px 0;
    }
    
    #toggle {
        display: block;
        position: relative;
    }
    
    #toggle span {
    }
    
    #toggle span a {
        position: absolute;
        top:-30px;
        background: #000;
        padding: 10px;
        border-bottom: 1px solid #444;
        color: #fff;
        text-align: center;
        text-decoration: none;
    }
    
    #toggle span a:hover {
        opacity: 1;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        text-decoration: none;
    }
}

/*--------------------------------------------------------
メインコンテンツ
--------------------------------------------------------*/
/*--共通設定--*/
main {
    display: block;
    padding-bottom: 20px;
}

/*--解像度1024px以上〜PC用設定〜--*/
@media only screen and (min-width : 1024px){
    main {
        display: block;
        width: 750px;
    }
}

/*--解像度1023px以下〜タブレット・スマホ用設定〜--*/
@media only screen and (max-width : 1023px){
    main {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
}

/*--共通設定--*/
/*記事一覧*/
main .post_list {
    border:1px solid #c0c0c0;
    padding: 10px 10px 4px 10px;
    margin-bottom: 10px;
}

/*--解像度700px以上〜PC・タブレット用設定〜--*/
@media only screen and (min-width : 700px){   
    main .post_list {
        display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    }

    main .post_list .eye_catching {
        width: 310px;
        margin-right: 20px;
}
    
    main .post_list .eye_catching img {
        min-width: 310px;
        height: 180px;
        object-fit: cover;
        object-position: 0 0;
    }
}

@media only screen and (max-width : 699px){
    main .post_list .eye_catching img {
        width: 100%;
        height: auto;
    }
}



main .post_list .eye_catching {
    position: relative;
}

main .post_list .eye_catching a {
    color: #fff;
    text-decoration: none;
}

main .post_list .eye_catching .category {
    background: #000;
    color: #fff;
    position: absolute;
    top:0;
    left: 0;
    font-size: 0.8em;
    padding: 6px;
}

main .post_list .eye_catching .flag {
    width: 50px;
}

main .post_list .eye_catching .flag img {
    min-width:50px;
    max-width: 50px;
    width: 50px;
    height: auto;
}

main .post_list .eye_catching .flag {
    position: absolute;
    top:5px;
    right: 5px;
}
main .post_list .post_text h3 {
    margin-bottom: 6px;
}

main .post_list .post_text h3 a {
    color: #000;
    text-decoration: none;
}

main .post_list .post_text p {
    font-size: 0.9em;
    color: #333;
    border-bottom: dotted 1px #c0c0c0;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

main .post_list .post_text .category {
    font-size: 0.8em;
    margin-bottom: 6px;
}

main .post_list .post_text .category span {margin-left: 6px;}

main .post_list .post_text .post_datetime {
    color: #666;
    margin-top: 10px;
}

main .post_list .post_text .more_post {
    border: 1px solid #000;
    padding: 4px;
}

main .post_list .post_text .more_post a {
    color: #000;
    text-decoration: none;
}

/*--------------------------------------------------------
サイドメニュー
--------------------------------------------------------*/
aside {display: block;}

/*--解像度1024px以上〜PC用設定〜　ここから--*/
@media only screen and (min-width : 1024px){
    aside {width: 228px;}
}
/*--解像度1024px以上〜PC用設定〜　ここまで--*/

aside dl {
    border: 1px solid #000;
    margin-bottom: 20px;
}

aside dt {
    background: -moz-linear-gradient(top, #cbb88c 22%, #8a7b4f);
    background: -webkit-linear-gradient(top, #cbb88c 22%, #8a7b4f);
    background: linear-gradient(to bottom, #cbb88c 22%, #8a7b4f);
    color: #fff;
    text-align: center;
    padding: 14px 0;
}

aside dd {
    padding: 6px;
    font-size: 0.8em;
}

aside dd li {
    padding: 6px;
    list-style: none;
}

aside dd li::before {content: "> "}

aside dd .iframe-content {
    position: relative;
    width: 100%;
    padding: 56.25% 0 0 0;
}
aside dd .iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*--共通設定--*/
aside ul {
    text-align: center;
    margin-bottom: 20px;
}

aside dd ul {
    text-align: left;
    margin-bottom: 0;
}

/*--解像度1023px以下〜タブレット・スマホ用設定〜--*/
@media only screen and (max-width : 1023px){
    aside ul img {width: 230px;}
}

aside .social_media dd img {
    width: 40px;
    height: auto;
}

aside .social_media dd ul {margin: 0;}

aside .social_media dd li::before {content: ""}
aside .sponsor dd li::before {content: ""}

aside a {
    color: #000;
    text-decoration: none;
}

aside .book {
    font-size: 0.9em;
    text-align: center;
    position: relative;
}

aside .book a {
    color: #408fc7;
}

aside .book dd {
    font-size: 1.1em;
}

aside .book .balloon_book {
  position: relative;
  display: inline-block;
  margin: 0.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #408FC6;
border-radius: 15px;
}

aside .book .balloon_book:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #408FC6;
}

aside .book .balloon_book p {
  margin: 0;
  padding: 0;
}

aside .book .amzlink {

}

/*--解像度1024px以上〜PC用設定〜--*/
@media only screen and (min-width : 1024px){
    aside .social_media ul {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
}

/*--解像度1023px以下〜タブレット・スマホ用設定〜--*/
@media only screen and (max-width : 1023px){
    aside .social_media ul {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }
}


/*--------------------------------------------------------
フッター
--------------------------------------------------------*/
footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding:0 0 20px 0;
}

footer h1 {margin: 0 20px 0 0;}
footer h1 img {max-width: 305px;}

footer .inqury span {
    padding: 6px;
}

footer .inqury a {
    color: #000;
    text-decoration: none;
}

/*フッターナビゲーション*/
footer .footer_menu {
    background: #f3f3f3;
    padding: 20px 0;
}

/*--------------------------------------------------------
解像度699px以下〜スマートフォン用設定〜 ここから
--------------------------------------------------------*/
@media only screen and (max-width : 699px){
    footer .footer_menu {display: none;}
}
/*--------------------------------------------------------
解像度699px以下〜スマートフォン用設定〜　ここまで
--------------------------------------------------------*/

footer nav ul {
    margin: 0 0 20px 0;
}
footer nav li:first-child img {
    width: 71px;
    height: auto;
}

footer nav li:nth-child(2) img {
    width: 63px;
    height: auto;
}

footer nav li:nth-child(3) img {
    width: 56px;
    height: auto;
}

footer nav li:last-child img {
    width: 93px;
    height: auto;
}

footer nav li {
    margin: 0 20px 0 0;
    padding: 0 20px 0 0;
    border-right:1px solid #000;
    text-align: center;
}
footer nav li:last-child {
    margin: 0;
    padding: 0;
    border: none;
}

/*ページトップ*/
footer #pageTop {padding: 14px 0;}
footer #pageTop img {
    width: 70px;
    height: auto;
}

/*copyright*/
footer .copyright,
footer .warning {padding: 10px 0;}
footer .warning {font-size: 0.7em;}

/*--------------------------------------------------------
トップページ
--------------------------------------------------------*/
/*メイン画像*/
#main_image {
    position: relative;
    margin-bottom: 20px;
}

#main_image dl {
    position: absolute;
    width: 100%;
    top:20px;
    text-align: center;
}

#main_image dt {font-size: 18px;}
#main_image dd img {max-width:597px;}

/*--解像度699px以下〜スマートフォン用設定〜--*/
@media only screen and (max-width : 699px){ 
    
    #main_image dt {padding: 0 10px;}
    
    #main_image dd img {display: none;}
}
/*--解像度596px以下〜その他〜--*/
@media only screen and (max-width : 596px){
    #main_image dd img {display: none;}
}

/*--共通設定--*/
#main_image .photo_copy {
    position: absolute;
    bottom:20px;
    left:20px;
}

#main_image .photo_copy img {width: 150px;}

#indexpage main .bn100kazoku dt {
    padding-bottom: 8px;
    background: url(../img/common/100kazoku_arrow.png) no-repeat bottom;
    background-size: 15px 13px;
}

/*世界100家族プロジェクト*/
#indexpage main .bn100kazoku dd {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 4px;
}

#indexpage main .bn100kazoku dd strong {
    font-size: 1.6em;
}

#indexpage main h2 {
    font-family: YuMincho,    /* Macの游明朝 */
    'Yu Mincho', /* Windowsの游明朝 */
    'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */
    serif;
    font-size: 26px;
    text-align: center;
    font-weight: normal;
    border-bottom: 1px solid #000;
    margin: 40px 0 10px 0;
}

/*解像度700px以上〜PC・タブレット用設定〜--*/
@media only screen and (min-width : 700px){
    #indexpage main .media_list {
        margin: 0 0 20px 0;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
}

#indexpage main .media_list dl {
    width: 180px;
    text-align: center;
}

/*--解像度699px以下〜スマートフォン用設定〜--*/
@media only screen and (max-width : 699px){     
    #indexpage main .media_list dl {
        width: 100%;
        margin: 0 auto 10px auto;
        border-bottom: 1px dotted #ccc;
    }
    
    #indexpage main .media_list dl:last-of-type {
        border: none;
    }
}

@media only screen and (min-width : 700px){
    #indexpage main .media_list img {
        width: 180px;
        height: 180px;
        object-fit: contain;
    }
}
@media only screen and (max-width : 699px){
    #indexpage main .media_list img {
        width: 180px;
        height: auto;
    }
}

#indexpage main .media_list dd {
    text-align: center;
    margin-bottom: 4px;
}

#indexpage main .media_list dd.titledd {
    border: 1px solid #408fc7;
    color: #408fc7;
    padding: 4px;
}

#indexpage main .more_link_bt {border: 1px solid #000;}

#indexpage main .more_link_bt a {
    display: block;
    text-align: center;
    padding: 4px;
    color: #000;
    text-decoration: none;
}
/*--------------------------------------------------------
記事一覧
--------------------------------------------------------*/
/*ページネーション*/
#pagination {
	clear: both;
    margin: 0 auto 20px auto;
	padding: 20px auto;
    text-align: center;
}
#pagination-box {
	display: inline-block;
}
#pagination span, #pagination a {
	display: block;
	float: left;
	margin: 2px 2px 2px 0;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
	width: auto;
	color: #000; /* 文字色 */
	background: #fff; /* 背景色 */
	border:1px solid #c0c0c0;
}

#pagination .current{
	padding: 10px 15px 10px 15px;
	background: #000; /* 現在のページの文字色 */
	color: #fff; /* 現在のページの背景色 */
}
@media only screen and (max-width: 699px) {
#pagination {
	font-size: 12px;
	line-height: 12px;
}
#pagination span, .pagination a {
	padding: 8px 10px 8px 10px;
}
#pagination .current{
	padding: 8px 10px 8px 10px;
}
}

/*--------------------------------------------------------
投稿ページと固定ページ
--------------------------------------------------------*/
main h1.title {
    font-size: 1.8em;
    margin-bottom: 10px;
}

#singlepage main article h2 {
    font-size: 1.4em;
    margin: 64px 0 32px 0;
    padding: 8px 0 8px 16px;
    border-left: 4px solid #000;
    background: #f0f0f0;
}

#singlepage main article h3 {
    margin: 64px 0 32px 0;
    padding: 6px 0;
    border-bottom: 2px solid #000;
    font-size: 1.2em;
}

#singlepage main article p {
    margin-bottom: 30px;
    line-height: 2em;
}

#singlepage main article span.btn {
    display: inline-block;
    width: 96%;
    text-align: center;
    border: 1px solid #000;
    margin:10px 0;
    padding: 6px;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}

#singlepage main article span.btn a {
    color: #000;
    text-decoration: none;
}

#singlepage main article .the-content ul {margin-bottom: 30px;}

#singlepage main article .the-content li {
    list-style:square outside;
    margin-left:20px;
}

#singlepage main article .box-info {
    margin: 0 0 40px 0;
    padding: 24px;
    background: #fafafa;
    border:2px solid #e2e5e8;
}

#singlepage main .meta {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    color: #999;
    margin-bottom: 20px;
    font-size: 0.8em;
}

#singlepage main .meta li {margin-right: 10px;}

#singlepage main .page_navigation {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 30px;
}

#singlepage main th,
#singlepage main td {
    border: 1px solid #ccc;
    padding: 10px;
}

#singlepage main th {
    background: #f0f0f0;
    font-weight: normal;
    text-align: left;
}

#singlepage main td input {padding: 10px;}

input[type=submit] {
    background-color:#000;
    padding:4px 32px;
    border: none;
    border-radius: 4px;
    color: #fff;
}

/*--------------------------------------------------------
プロフィール
--------------------------------------------------------*/
/*PC&TB*/
@media only screen and (min-width : 700px){
    .profbox {
        display: flex;
        flex-direction: row-reverse;
    }
    .profbox .profimg {
        width:300px;
        padding-left:20px;
    }

    .profbox .proftext {
        flex: 1;
    }
    
    .profileKazoku .kazokuBox {
        display: flex;
        align-items: center;
    }
    
    .profileKazoku .kazokuBox .kazokuImage {
        width:300px;
    }
    
    .profileKazoku .kazokuBox .kazokuImage img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }
    
    .profileKazoku .kazokuBox .kazokutext {
        flex: 1;
        padding: 20px;
    }
}

#singlepage main article .profileKazoku .kazokuBox .kazokutext h3 {
        margin:initial;
}

@media only screen and (max-width : 699px){
    .profileKazoku .kazokuBox .kazokuImage img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }
}


/*--------------------------------------------------------
メディア掲載情報
--------------------------------------------------------*/
.newsup_post_list {
    padding:30px 0;
    border-top:1px solid #000;
}
.newsup_post_list h2 a {
    color: #000;
    width: 100%;
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
}

.newsup_post_list .eye_catching {margin-bottom: 20px;}

.newsup_post_list .eye_catching img {
    width:100%;
    height: auto;
}

main article .more_post,
main .newsup_post_list .more_post {
    border: 1px solid #000;
    padding: 4px;
    margin: 20px 0 40px 0;
}

main article .more_post a,
main .newsup_post_list .more_post a {
    color: #000;
    text-decoration: none;
    text-align: center;
    display: block;
}

/*PC&TB*/
@media only screen and (min-width : 700px){
    .newsup_post_list {
        display: flex;
    }
    
    .newsup_post_list .eye_catching {
        margin-bottom: 0;
        width: 350px;
    }
    
    .newsup_post_list .eye_catching img {
        width:100%;
        max-width:350px;
        height: auto;
    }
    
    .newsup_post_list .post_text {
        flex: 1;
        padding-left: 20px;
    }
    
}


/*--------------------------------------------------------
BOOK
--------------------------------------------------------*/
.book_post_list {
    padding:20px;
    border:1px solid #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
}

.book_post_list h2 {
    align-self: flex-start;
}
.book_post_list h2 a {
    color: #000;
    width: 100%;
    text-decoration: none;
    display: block;
    margin-top:0;
    margin-bottom: 1rem;
}
.book_post_list .eye_catching img {
    width:100%;
    height: auto;
}

.book_post_list  .amazonurl a {
    border-radius: 2rem;
    background: #eee;
    border:1px solid #000;
    color: #000;
    display: block;
    text-decoration: none;
    margin-top:1rem;
    padding: 1rem;
    text-align: center;
}

@media only screen and (min-width : 700px){
    .bookwrap {
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        align-items: stretch;
    }
    
    .bookwrap .book_post_list {
        width:27%;
        margin:0 1% 1% 0;
    }
    
    .bookwrap .book_post_list:nth-of-type(3n) {
        margin:0 0 1% 0;
    }
}

@media only screen and (max-width : 699px){
    .bookwrap .book_post_list {
        margin-bottom: 20px;
    }
}
/*--------------------------------------------------------
広告の設定
--------------------------------------------------------*/
article .googleAd {
    margin: 10px 0;
}