@charset "utf-8";
@import url("component.css");

/**********************************************/
/*A-PLAT　キッズ教室*/
/*#f0e8de*/
/**********************************************/

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
* html body {
	overflow: hidden;
}

html {
    position: relative;   
    /*font-size: 62.5%;*/
    
    font-size: 32px; /* basic size 32px */
  
    
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
	margin:0;
	padding:0;
    /*
    font-size: 1.6em;
    font-size: 3.2em;
    */
    
    /*font-size: 2.66vw;*//* 10/375*100 */
    /*font-size: 1.6em;*/ /* basic size 16px */
    /*font-size: 3.2em;*/ /* basic size 32px */

  
    font-family: fot-tsukuardgothic-std,sans-serif;
    font-weight: 400;
    font-style: normal;
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*見出し*/
/*html「32px× 2rem = 64px」*/
h1 {
    margin:0;
    font-size:2rem;
}
h2 {
	font-size: 1.8rem;
}
h3 {
	font-size: 1.6rem;
}
h4 {
	font-size: 1.4rem;
}
h5 {
	font-size: 1.2rem;
}
h6 {
	font-size: 1rem;
}

img {
    border-width:0;
    max-width: 100%;
    height: auto;
}
p  {

}


/*フォントサイズ：見出サイズし相当のタイトル用*/
.h1x {
    margin:initial;
    padding:initial;
    border:initial;
    /*font-size:initial !important;*/

    font-size:2rem;
}
.h2x {
    margin:initial;
    padding:initial;
    border:initial;
    /*font-size:initial !important;*/
    font-size:1.8rem;
}
.h3x {
    margin:initial;
    padding:initial;
    border:initial;
    /*font-size:initial !important;*/
    font-size:1.6rem;
}
.h4x {
    margin:initial;
    padding:initial;
    border:initial;
    /*font-size:initial !important;*/
    font-size:1.4rem;
}
.h5x {
    margin:initial;
    padding:initial;
    border:initial;
    /*font-size:initial !important;*/
    font-size:1.2rem;
}
.h6x {
    margin:initial;
    padding:initial;
    border:initial;
    /*font-size:initial !important;*/
    font-size:1rem;
}


/*フォントサイズ*/
.font-025x { font-size: 0.25rem; }   /*32x0.25 = 8px*/
.font-05x { font-size: 0.5rem; }   /*32x0.5 = 16px*/
.font-075x { font-size: 0.75rem; }  /*32x0.75 = 24px*/
.font-10x { font-size: 1.0rem; }
.font-125x { font-size: 1.25rem; } /*32x1.25 = 40px*/
.font-15x { font-size: 1.5rem; }   /*32x1.5 = 48px*/
.font-175x { font-size: 1.75rem; } /*32x1.75 = 56px*/
.font-20x { font-size: 2.0rem; }   /*32x1 = 64px*/





/**********************/
/*レイアウト枠*/
/**********************/
.container {
    width:100%;
    margin: 0 auto;
}

.inner {
    width:100%;
    max-width:1200px;
    margin: 0 auto;
}

.contents {
    width: 100%;
    max-width:1200px;
    margin: 0 auto;
    overflow:hidden;
    /*border: 1px red solid;*/
}


/**********************/
/*ヘッダー*/
/**********************/
header {
    width:100%;
    background-color:#fff;
}

/*クイズ ロゴ*/
#logo img{
	height: 60px;
}
/*KIDS ロゴ*/
.hlogo_k img {
	height: 80px;
}
.hlogo_a img {
	width: 100%;
	max-width:300px;
}

.container_logo{
	display: flex;
	justify-content:space-between;
	align-items: flex-end;
}


/* パンくずリスト*/
.inner-breadcrumb {
    background-color: #f0e8de;
    padding: 10px 0;
}
#breadcrumb {
    width: 100%;
    margin:0;
    padding:0;
    list-style-type:none;
    overflow: hidden;
}
#breadcrumb li {
    /*display:inline;*/
    float:left;
    background:url("../img/navi.png") no-repeat right center;
    padding:0 14px 0 0 ;
    margin:0 5px 0 0;   
    background-size: 8px;
    color: #686868;
    font-size: 0.5em;
    line-height: 100%;
}
#breadcrumb a {
    text-decoration:none;
    color: #686868;
    
}
#breadcrumb li:last-child {
    background-image:none;
}


/*ドロワメニュー（枠）*/
#mainmenu {
    width: 100%;
    max-width: 450px;
    /*height: 70vh;
    max-height: 700px;*/
    overflow:hidden;
    position: fixed;
    top: 10vh;
    
    /*font-size: 0.7em;*/
    font-size: 0.75em;
    
    transition-duration: 1s;
    z-index: 10000;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}


/*メインメニュー*/
.menu {
    width: calc(100% - 70px);
    background-color: #fff;
    padding: 20px;
    border:2px #7d60a7 solid;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
	-moz-box-shadow: 10px 0 10px rgba(0,0,0,.3);
    box-shadow: 0 3px 3px rgba(0,0,0,.2);  
    /*height: 75%;*/
    overflow: auto;
}
.menu a {
    text-decoration: none;
    color:#7d60a7;
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none; 
}
.menu li {
    line-height: 1.25em;
}

/*親メニュー*/
.menu>ul>li {
    border-bottom: 2px #7d60a7 solid;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.menu>ul>li:last-child {
    border-bottom-width:0;
    padding-bottom: 0px;
    margin-bottom: 0px;
}


/*子メニュー*/
.menu ul.child {
    margin: 10px 0 10px 0px;
}
.menu ul.child li {
    margin: 10px 0;
}

/*MENUボタン*/
#menuimg {
    width: 70px;
}
#menubtn {
    cursor: pointer;
filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}


.open {
    right: -380px;
}
.closed {
    right: 0px;
}


/* 出典・参考*/
.reference {
    padding: 25;0;0;
}
#reference {
    width: 100%;
    margin:0;
    padding:30;
    list-style-type:none;
    overflow: hidden;
}
#reference li {
    /*display:inline;*/
    padding:0 14px 5 0 ;
    margin:0 5px 5 0;   
    background-size: 8px;
    color: #686868;
    font-size: 0.75em;
    line-height: 175%;
}
#reference a {
    text-decoration: none;
    color: #008FC4;
    text-indent: 30px;
    padding-left: 20px;	
}

/* 出典・参考へのリンク*/
.reference_link {
    font-size: 0.6em;
    color: #686868;
    text-align: right;
}

.reference_link a {
    text-decoration: none;
    color: #648694;
}

/**********************/
/*フッター*/
/**********************/
footer {
    width:100%;
    padding: 30px 0;
    background-color:#f0e8de;
    font-size: 0.5em;
}
footer .inner {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    
    /*justify-content: center;*/
    align-items: center;
}

.flogo {
    width: 300px;
}
.flogo img {
    max-width: 250px;
}

.copyright {
    width: calc(100% - 300px);
    line-height: 120%;
}
.copyright div {
    margin-bottom: 10px;
}

/* ページトップへ戻る*/
#pagetop {
    clear: both;
    position: fixed;
    bottom: 20px;
    right: 40px;
    z-index: 9999;
    cursor: pointer;
}
#pagetop img {
    width: 80px;
}

.mx-a {
    margin-left: auto;
    margin-right: auto;
}

.d-block {
    display: block;
}



/****************************/
/*レスポンシブ*/
/****************************/



@media screen and (max-width: 1500px) {
	
	.reference_link {
	margin-top: -10px;	
	margin-right: 70px;
}
}

@media screen and (max-width: 1200px) {
    .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .contents {
        padding-left: 20px;
        padding-right: 20px;
    }
	.reference_link {
	margin-top: -10px;	
	margin-right: 70px;
}
}

@media screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 980px) {
    
    html {
        font-size: 24px;
    }
    #mainmenu {
        top: 5vh;
    }
    #breadcrumb li {
        font-size: 0.6em;
    }
	 #reference h6{
        font-size: 1em;
    }
	#reference li {
        font-size: 1em;
    }
	.reference_link {
	margin-top: -5px;	
	margin-right: 60px;
}
.container_logo{
    width : calc(100% - 70px) ;
}
}

/*SP*/
@media screen and (max-width: 768px) { 
    
    html {
        font-size: 20px;
    }
    
    #mainmenu {
        max-width: 280px;
        /*height: 75vh;
        max-height: 500px;*/
        top: 2vh;
    }
    .menu {
        width: calc(100% - 50px);
    }
    #menuimg {
        width: 50px;
    }
    .open {
        right: -232px;
    }
   #reference li {
        font-size: 1em;
    }
	.reference_link {
	margin-top: -5px;	
	margin-right: 30px;
}
    footer {
        font-size: 0.75em;
    }
    .flogo {
        width: 100%;
        margin-bottom: 10px;
    }
    .copyright {
        width: 100%;
    }
.container_logo{
	align-items: center;
    width : calc(100% - 50px) ;
} 
}

@media screen and (max-width: 520px) {
    html {
        font-size: 16px;
    }
    p  {
        font-size: 1.25em;
    }
    .inner {
        padding-left: 10px;
        padding-right: 10px;
    }
    .contents {
        padding-left: 10px;
        padding-right: 10px;
    }
    #mainmenu {
        top: 0vh;
        font-size: 0.9em;/*1.2em*/
        max-width: 300px;
        /*height: 90vh;
        max-height: 800px;*/
    }
    .menu {
        padding: 20px 10px;
    }
    .open {
        right: -252px;
    }
    
    #breadcrumb li {
        background-position: right 5px;
        font-size: 0.8em;
        background-size: 5px;
        margin-bottom: 4px;
    }
    footer {
        padding: 20px 0;
    }
.container_logo .hlogo_k{
	width: 50%;
}
.container_logo .hlogo_a{
	width: 40%;
}   
}

@media screen and (max-width: 320px) {
}


@media screen and (min-width: 768px) {
    .sp-item {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .pc-item {
        display: none;
    }
}