@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
/*html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sidebar,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}span{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*/
ul{list-style:none}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
*:before, *:after { box-sizing: inherit; }
/*================================================
 *  common main-padding 20px scroll 20px = 40px追加 1040px 790px 540px
 ================================================*/
body {
    color:#333;
    font-family:"YuGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height:1.6;
    background:#fff;
    width:100%;
    min-height: 100% !important;
    height: auto;
    margin: 0;
    padding: 0;
    word-wrap:break-word;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
@media screen and (max-width:360px){
body{font-size: -webkit-calc(100vw / 22.5); font-size: calc(100vw / 22.5);}
}
@media print, screen and (min-width:360px){
body{font-size:16px;}
}
_:-ms-fullscreen, :root body {
  font-family: Meiryo, sans-serif;
}
#wrap {
    width:100%;
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0;
    padding:0;
    display:block;
    clear:both;
    overflow:hidden;
    background-color: #fffdf8;
}

#contents {
    display:block;
    clear:both;
    overflow:hidden;
    word-wrap:break-word;
    width:100%;
    padding-bottom: 32768px;
    margin-bottom: -32768px;
    max-width:1020px;
    padding:1em 0 0;
    margin:0 auto 20px;
}
#main {
    display:block;
    clear:both;
    overflow:hidden;
    word-wrap:break-word;
    width:100%;
    margin:0;
    padding:0 10px 20px;
    float:none;
    background:rgba(255, 255, 255, 0.90);
}
#sidebar {display:none;}

.inner
{
position: relative;
    width: auto;
    max-width: 1000px;
    margin: 0 auto;
}
section
{
        width:100%;
        margin:0 auto;
        padding:0;
        display:block;
        clear:both;
        overflow:hidden;
}
/*================================================
 *  flex box
 ================================================*/
.af2, .bf2, .lf2, .af3, .bf3, .lf3, .af4, .bf4, .lf4, .af5, .bf5, .lf5{
     display: flex;
     flex-flow: row wrap;
}
.af2, .af3, .af4, .af5{justify-content:space-around;}
.bf2, .bf3, .bf4, .bf5{justify-content:space-between;}
.lf2, .lf3, .lf4, .lf5{justify-content:flex-start;}
.lf2 .bin, .lf3 .bin, .lf4 .bin, .lf5 .bin{
    flex-grow: 0;
    margin-bottom: 3.5em;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    border: 1px #ccc solid;
    box-shadow: 0px 10px 15px -10px;
}
.af2 .bin, .af3 .bin, .af4 .bin, .af5 .bin, .bf2 .bin, .bf3 .bin, .bf4 .bin, .bf5 .bin{
    flex-grow: 0;
    margin-bottom: 3.5em;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

@media screen and ( max-width : 480px ){ 
.af2 .bin, .bf2 .bin, .lf2 .bin{flex-basis:460px;}
.lf2 .bin{margin-left:-webkit-calc(50% - 230px); margin-left:calc(50% - 230px);}
.af3 .bin, .bf3 .bin, .lf3 .bin{flex-basis:310px;}
.lf3 .bin{margin-left:-webkit-calc(50% - 155px); margin-left:calc(50% - 155px);}
.af4 .bin, .bf4 .bin, .lf4 .bin{flex-basis:230px;}
.lf4 .bin{margin-left:-webkit-calc(50% - 115px); margin-left:calc(50% - 115px);}
.af5 .bin, .bf5 .bin, .lf5 .bin{flex-basis:145px;}
.lf5 .bin{margin-left:-webkit-calc(33.3% - 95px); margin-left:calc(33.3% - 95px);}
}

@media screen and ( min-width : 481px ) and ( max-width : 540px ) { 
.af2 .bin, .bf2 .bin, .lf2 .bin{flex-basis:460px;}
.lf2 .bin{margin-left:-webkit-calc(50% - 230px); margin-left:calc(50% - 230px);}
.af3 .bin, .bf3 .bin, .lf3 .bin{flex-basis:310px;}
.lf3 .bin{margin-left:-webkit-calc(50% - 155px); margin-left:calc(50% - 155px);}
.af4 .bin, .bf4 .bin, .lf4 .bin{flex-basis:230px;}
.lf4 .bin{margin-left:-webkit-calc(50% - 115px); margin-left:calc(50% - 115px);}
.af5 .bin, .bf5 .bin, .lf5 .bin{flex-basis:160px;}
.lf5 .bin{margin-left:-webkit-calc(33.3% - 108px); margin-left:calc(33.3% - 108px);}
}

@media screen and ( min-width : 541px ) and ( max-width : 790px ) { 
.af2 .bin, .bf2 .bin, .lf2 .bin{flex-basis:460px;}
.lf2 .bin{margin-left:-webkit-calc(50% - 230px); margin-left:calc(50% - 230px);}
.af3 .bin, .bf3 .bin, .lf3 .bin{flex-basis:310px;}
.lf3 .bin{margin-left:-webkit-calc(50% - 155px); margin-left:calc(50% - 155px);}
.af4 .bin, .bf4 .bin, .lf4 .bin{flex-basis:230px;}
.lf4 .bin{margin-left:-webkit-calc(33.3% - 155px); margin-left:calc(33.3% - 155px);}
.af5 .bin, .bf5 .bin, .lf5 .bin{flex-basis:160px;}
.lf5 .bin{margin-left:-webkit-calc(25% - 120px); margin-left:calc(25% - 120px);}
}

@media screen and ( min-width : 791px ) and ( max-width : 900px ) { 
.af2 .bin, .bf2 .bin, .lf2 .bin{flex-basis:460px;}
.lf2 .bin{margin-left:-webkit-calc(50% - 230px); margin-left:calc(50% - 230px);}
.lf3 .bin, .af3 .bin, .bf3 .bin{flex-basis:310px;}
.lf3 .bin{margin-left:-webkit-calc(33.3% - 206px); margin-left:calc(33.3% - 206px);}
.lf4 .bin, .af4 .bin, .bf4 .bin{flex-basis:230px;}
.lf4 .bin{margin-left:-webkit-calc(25% - 173px); margin-left:calc(25% - 173px);}
.lf5 .bin, .af5 .bin, .bf5 .bin{flex-basis:160px;}
.lf5 .bin{margin-left:-webkit-calc(20% - 129px); margin-left:calc(20% - 129px);}
}

@media screen and ( min-width : 901px ) and ( max-width : 1039px ) { 
.af2 .bin, .bf2 .bin, .lf2 .bin{flex-basis:460px;}
.lf2 .bin{margin-left:-webkit-calc(50% - 230px); margin-left:calc(50% - 230px);}
.lf3 .bin, .af3 .bin, .bf3 .bin{flex-basis:310px;}
.lf3 .bin{margin-left:-webkit-calc(33.3% - 206px); margin-left:calc(33.3% - 206px);}
.lf4 .bin, .af4 .bin, .bf4 .bin{flex-basis:230px;}
.lf4 .bin{margin-left:-webkit-calc(25% - 173px); margin-left:calc(25% - 173px);}
.lf5 .bin, .af5 .bin, .bf5 .bin{flex-basis:160px;}
.lf5 .bin{margin-left:-webkit-calc(16.6% - 132px); margin-left:calc(16.6% - 132px);}
}

@media print, screen and (min-width: 1040px){
.lf2 .bin, .af2 .bin, .bf2 .bin{flex-basis:460px;}
.lf2 .bin:nth-child(2n+1){margin-left:5px;}
.lf2 .bin:nth-child(2n){margin-left:70px;}
.lf3 .bin, .af3 .bin, .bf3 .bin{flex-basis:310px;}
.lf3 .bin:nth-child(3n+1){margin-left:5px;}
.lf3 .bin:nth-child(3n+2), .lf3 .bin:nth-child(3n){margin-left:30px;}
.lf4 .bin, .af4 .bin, .bf4 .bin{flex-basis:230px;}
.lf4 .bin:nth-child(4n+1){margin-left:2.5px;}
.lf4 .bin:nth-child(4n+2), .lf4 .bin:nth-child(4n+3), .lf4 .bin:nth-child(4n){margin-left:25px;}
.lf5 .bin, .af5 .bin, .bf5 .bin{flex-basis:160px;}
.lf5 .bin:nth-child(5n+1){margin-left:20px;}
.lf5 .bin:nth-child(5n+2), .lf5 .bin:nth-child(5n+3), .lf5 .bin:nth-child(5n+4), .lf5 .bin:nth-child(5n){margin-left:40px;}
#sidebar .lf2 .bin, #sidebar .lf3 .bin, #sidebar .lf4 .bin{margin-left:0; !important}
}

.fg1 { flex-grow: 1;}
.fg2 { flex-grow: 2;}
.fg3 { flex-grow: 3;}
.f2 p, .f3 p{margin:0.5em 0.5em 1em;}