@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP&display=swap');
/* Reset */

ul,ol { list-style: none; }
img {
	border: 0;
}

* { margin:0; padding:0; border:0; }

html {margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

body{
	line-height:1.6;
	text-align:left;
	font-family: "Noto Sans JP", 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	margin:0px;
	padding:0px;
	color:#111;
	font-size:16px;
    background-color: #fff;
    font-weight: 400;
    font-feature-settings: "palt";
}

a img {
	border:none;
}

a {
	color:#111;
	text-decoration:none;
}
a:hover {
	color:#555;
}


.t8{font-size:8px;}
.t10{font-size:10px;}
.t11{font-size:11px;}
.t12{font-size:12px;}
.t13{font-size:13px;}
.t14{font-size:14px;}
.t15{font-size:15px;}
.t16{font-size:16px;}
.t18{font-size:18px;}
.t20{font-size:20px;}
.t21{font-size:21px;}
.t24{font-size:24px;}
.t28{font-size:28px;}
.t30{font-size:30px;}
.t32{font-size:32px;}
.t36{font-size:36px;}
.t40{font-size:40px;}
.t48{font-size:48px;}
.t100{font-size:100px;}

.alpha a:hover img {
  opacity: 0.5;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  transition: all 0.3s;
}

.clearboth { padding: 0; clear:both; }

.float-left{float:left;}
.float-right{float:right;}

.center{text-align: center;}

.nw{
	display: inline-block;
}

a.page-link{
   display: block;
   margin-top:-30px;
   padding-top:30px;
}

h1, h2, h3, h4 ,h5{font-weight: 400;}

/*==========================================================*/

.wrap-hidden{
	overflow: hidden;
}

.container{
	margin:0 auto;
	max-width:1060px;
	padding: 0 30px;
}


@media screen and (min-width: 901px) {.sp{display:none;}}
@media screen and (max-width: 900px) {.pc{display:none;}}


p{
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 8px 0px;
}


.serif{font-family: "Noto serif JP";}

.list-disc{list-style-type: disc;padding: 0 0 0 20px;}
.list-disc li{margin-bottom: 10px;}
/*==========================================================*/



/* ヘッダー＆ハンバーガー ---------------- */

.inner {
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
/* header */

.header-logo{
	float: left;
	margin-right: 20px;
}

.header-logo img{
    width: 25px;
    margin-right: 10px;
    opacity: 0.7;
}

.header-logo img.logo-hpma{
    width: 190px;
    opacity: 1.0;
}

.header-title{
	font-size: 13px;
	float: left;
	color: #666;
	font-weight: bold;
	padding-top: 7px;
}

#top-head {
    top: -100px;
    position: absolute;
    width: calc(100% - 40px);
    margin: 100px auto 0;
    padding: 20px;
    line-height: 1;
    z-index: 999;
	font-size: 14px;
	background-color: #fff;
	height: 30px;
}
#top-head a,
#top-head {
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
}
#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0px;
    bottom: 0;
    font-size: 13px;
}
#global-nav ul li {
    float: left;
}
#global-nav ul li a {
    padding: 1px 6px;
    background-color: #e3007f;
    color: #fff;
    margin: 0 2px;
}

#global-nav ul li a:hover {
    background-color: #E552A4;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 30px;
    background: #f4efe7;
    background: rgba(233,232,224,0.90);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
   
}
#top-head.fixed #global-nav ul li a {
    color: #fff;
    padding: 0 8px;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #828282;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

@media screen and (max-width: 900px) {
	.header-title{padding-top: 0px;font-size: 12px;}
    .header-logo img{
    width: 22px;
    margin-right: 6px;
}
    .header-logo img.logo-hpma{
    width: 190px;
}
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: rgba(255,255,255,0.90);
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 13px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}

/* end ハンバーガーメニュー */



#top .top-main{
    margin: 0px auto;
    text-align: center;
    line-height: 0;
}

#top .top-main .main-pc{
    max-width: 950px;
    width: 95%;
    margin: 120px 0 40px 0;
}

#top .top-main .main-sp{
    width: 95%;
    margin-top: 80px;
}

.top-menu{
    padding: 0px 20px 0px 20px;
    margin: 0px auto;
    background-color: #fff8fd;
    border-bottom: 16px solid #e3007f;
}

@media screen and (min-width: 901px) {
    #top .top-menu{ margin: 40px auto 30px auto; padding: 5px 20px 5px 20px;}
}

.top-menu ul{
    display: flex; justify-content:center; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
}

.top-menu li{
    margin: 3px 30px;
    font-size: 17px;
}

.top-menu a{
    padding: 6px 10px;
    color: #e3007f;
    transition: all 0.3s;
}

.top-menu .selected{
    padding: 10px 10px;
    background-color: #e3007f;
    color: #fff;
}

.top-menu a:hover{
    color: #F03EA1;
    transition: all 0.3s;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' -25,
  'opsz' 20;
  vertical-align: -5px;
}



#top .lead-txt{
    padding: 50px 5% 30px 5%;
    line-height: 1.6;
    font-size: 16px;
    margin: 0 auto;
    max-width: 1160px;
    color: #e3007f;
    text-align: center;
    font-weight: 300;
}

#top .lead-txt .tit{
    font-size: 40px;
    font-weight: bold;
    font-family: "Noto serif JP";
}

@media screen and (min-width: 901px) {
    #top .lead-txt{font-size: 18px;}
}

#top .kaiki{
	padding: 20px 0;
    margin-bottom: 20px;
}

#top .kaiki h2{
	font-size: 18px;
    color: #e3007f;
}

#top .kaiki .left{padding-right: 10px;}
#top .kaiki .right{padding-right: 10px;}



@media screen and (min-width: 901px) {
    #top .kaiki .left{width: 45%; float: left;}
    #top .kaiki .right{width:45%; float: right;}
}

@media screen and (max-width: 900px) {
	#top .kaiki .left, #top .kaiki .right{float: none;padding-left: 10px;}
}

.moushikomi{
    margin:0px auto 0 auto;
    padding: 0px 10px;
    text-align: center;
    max-width:960px;
    
}

.moushikomi .waku{
    padding: 20px 0px;
    margin: 20px 0 0 0;
    text-align: left;
    font-feature-settings: "palt";
}

.moushikomi .tit{
    font-size: 22px;
    color: #e3007f;
}

.link-underline{
    text-decoration: underline;
}

.moushikomi .link-entry{
    background-color: #e3007f;
    width: 270px;
    margin: 10px auto;
    text-align: center;
    padding: 8px;
    line-height: 1;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}

.moushikomi .link-entry:hover{
    opacity: 0.8;
}

ul.list-kuromaru {
    padding: 10px 0;
    line-height: 1.5;
}
ul.list-kuromaru li {
  position: relative;
  padding-left: 18px;
  padding-bottom: 8px;
}

ul.list-kuromaru li:before {
  content: "●";
  position: absolute;
  top: .1em;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
}

@media screen and (min-width: 901px) {
    .moushikomi{margin:30px auto 0 auto;}
    .moushikomi .waku{width: calc(50% - 80px);padding: 10px 30px;}
    .moushikomi .f-r{float: right; border-left: 1px solid #e3007f;}
    .moushikomi .f-l{float: left; border: none;}
}

#top .poster{
    text-align: center;
    margin: 80px 0;
}

#top .poster img{ width: 220px;box-shadow: 5px 5px 16px #ccc; margin-bottom: 10px;}

#top .award{
    padding: 30px 0px 30px 40px;
    margin: 50px auto;
    border-top: 7px solid #e3007f;
    max-width: 1000px;
}

#top .big-tit{
    color: #e3007f;
    font-size: 36px;
    margin: 20px 10px;
    text-align: center;
    font-family: "Noto serif JP";
}

#top .award .big-tit{
    padding-right: 30px;
}

#top .award .award-name{
    font-size: 22px;
    margin-right: 6px;
    color: #e3007f;
    line-height: 1;
}

#top .award ul{
    display: flex;
    justify-content: flex-start;
    flex-grow: 1;
    flex-wrap: wrap;
    font-size: 16px;
}

#top .award li{
    min-width: 280px;
    background-color: rgba(255,255,255,0.87);
    align-items: stretch;
    margin: 2%;
}


#top .touka-bg{
   font-size: 14px;
   padding-right: 10px;
}

@media screen and (max-width: 1050px) {
    #top .award li{width: 42%;}
    #top .award .award-name{font-size: 20px;}
}

@media screen and (max-width: 710px) {
    #top .award li{width: 100%;}
    
}

.spacer {
  width: 100%;
}

#top .shinsain{
    padding: 30px 0px 0px 10px;
    margin: 120px auto;
    border-top: 7px solid #e3007f;
    max-width: 1000px;
}

#top .shinsain table{
     font-size: 16px;
     line-height: 1.3;
     border-spacing: 6px;
}

#top .shinsain th{
    font-weight: normal;
    vertical-align: top;
    text-align: right;
    color: #e3007f;
    padding: 10px;
    font-size: 18px
}

#top .shinsain td{
    padding: 10px;
}

@media screen and (max-width: 800px) {
    #top .shinsain table{font-size: 15px;}
    #top .shinsain th, #top .shinsain td{ width:100%; display:block; text-align: left; vertical-align: bottom; padding: 0;}
    #top .shinsain th{padding: 16px 0 6px 0;}
}

#top .shinsain .caution {
    text-align: right;
    line-height: 1.2;
    margin: 20px 20px 0px 0;
    font-size: 14px;
}


.kigen{
    border: 2px solid #e3007f;
    padding: 8px;
    margin: 0 auto;
    max-width: 540px;
    width: 90%;
}

.kigen-inner{
    border: 1px solid #e3007f;
    padding: 20px;
    text-align: center;
}

.kigen-tit{
    font-size: 26px;
    font-family: "Noto serif JP";
    color: #e3007f;
}

.kigen-day{
    font-size: 37px;
    font-family: "Noto serif JP";
    font-weight: bold;
}

.kigen-spacer{
    height: 10px;
}

.kigen-btn{
    color: #fff;
    background-color: #e3007f;
    padding: 6px 10px;
    line-height: 1;
    display: table-cell;
    transition: all 0.3s;
}

a .kigen-btn:hover{
    background-color: #F458AF;
    transition: all 0.3s;
    padding: 6px 10px;
}

.footer-pink{
    margin-top: 70px;
    background-color: #fff8fd;
    border-top: 1px solid #E557A7;
    text-align: center;
    padding-top: 40px;
    font-size: 14px;
}

.kako-title{
    font-size: 24px;
    color: #e3007f;
    font-family: "Noto serif JP";
}

ul.kako{
    width: 90%;
    max-width: 920px;
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    margin: 20px auto;
}

.kako li{
    color: #fff;
    background-color: #e3007f;
    padding: 5px 0px 8px;
    line-height: 1;
    width: 70px;
    text-align: center;
    font-size: 18px;
    transition: all 0.3s;
    font-weight: 500;
    margin: 4px;
}

.kako a li:hover{
    background-color: #F458AF;
    transition: all 0.3s;
    padding: 5px 0px 8px;
}

.logo-date{
    text-align: center;
    padding: 20px 0 40px 0;
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    background-color: #fff8fd;
}

.logo-date img{
    width: 255px;
    margin-bottom: 10px;
}

@media screen and (max-width: 900px) {
    .logo-date{font-size: 14px;}
}


.menu_bottom-sp,
.menu_bottom-sp a{
    color: #fff;
}

.menu_bottom-sp a:hover {color: #F7ADD7;}

.menu_bottom-sp ul{
    display: flex; justify-content: center; flex-wrap: wrap; margin: 10px auto;
    padding: 10px;
    max-width: 800px;
}

.menu_bottom-sp li{
    width: 140px;
    margin: 4px 10px;
    font-size: 14px;
    padding: 0 0 0 3px;
    text-align: center;
    color: #fff;
    background-color: #e3007f;
}

.menu_bottom-sp li:hover{
    background-color: #F146A5;
}

.bottom-bar{
    height: 1px;
    background-color: #EEADD2;
    margin: 40px 0;
}

#footer{
	border-top:10px solid #B4D6E4;
	padding: 10px 30px;
	height: 80px;
	position: relative;
	background-color: #fff;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    color: #333;
}

#footer a{color: #333;}

#footer .w1{
	float: left;
	font-size: 11px;
	color: #5E5E5E;
	line-height: 1.2;
}

#footer .w1 img{
	margin-bottom: 10px;
}

#footer .w2{
	float: left;
	margin-left: 20px;
}

#footer .w2 img{
    margin: 5px;
}

#footer .w3{
	font-size: 12px;
}

#footer .w3 .waku{
	border: 1px solid #999;
	display: inline-block;
	line-height: 1;
	padding: 2px 8px;
	margin: 0 0 10px 10px;
}

#footer .w3 .copyright{
	font-size: 10px;
	color: #b3b3b3;
}

@media screen and (min-width: 931px) {
#footer .w3{
	float: right;
	margin-left: 20px;
	width:600px;
	position: absolute;
	bottom: 10px;
	right: 20px;
	text-align: right;
}
#footer .w3 .copyright{text-align: right;}
}

@media screen and (max-width: 930px) {
	#footer{height: auto;}
	#footer .w1{float: none; margin: 0 auto; text-align: center;}
	#footer .w2{float: none; margin: 20px auto; text-align: center;}
	#footer .w3{float: none; margin: 0 auto; text-align: center; }
}



/*entry ==========================================================*/

#entry{
    line-height: 1.8;
}

.header-aria{
    display: flex;
    justify-content: space-between;
    margin: 80px 0 30px 0;
    padding: 0 20px;
}

.header_logo img{
    max-width: 250px;
}

.header_date img{
    max-width: 230px;
}

.header-aria-sp{
    margin: 80px 0 30px 0;
    text-align: center;
}

.header-aria-sp img{
    width: 94%;
}

#entry .bar{
    border-top: 1px solid #F261B2;
    padding-top: 3px;
    background-color: #fff8fd;
}

.page-title{
    font-size: 38px;
    color: #e3007f;
    text-align: center;
    padding: 30px;
    font-family: "Noto serif JP";
}



@media screen and (max-width: 900px) {
    .page-title{font-size: 26px; color: #fff; background-color: #e3007f; padding: 4px; margin-bottom: 40px;}
}

.kugiri-bar{
    height: 1px;
    background-color: #e3007f;
    max-width: 1400px;
    margin: 0 auto 60px auto;
}

#entry .container h1{
    font-size: 29px;
    margin: 26px 0;
    line-height: 1.1;
    color: #e3007f;
    text-align: center;
    font-family: "Noto serif JP";
}

#entry .container h2{
    font-size: 24px;
    margin: 26px 0 3px 0;
    color: #e3007f;
}


ol.list-num{
    list-style-type: decimal;
    padding: 0 0 0 20px;
}

ol.list-num li::marker{
    color: #e3007f;
    font-weight: 500;
}

ol.list-num li{
    line-height: 1.4;
    margin: 14px 0;
}


ol.list-num ul{
    list-style-type: disc;
    padding: 0 0 0 20px;
}



ol.list-num ul li::marker{
    color: #999;
}

ol.list-num ul li{
    line-height: 1.3;
    margin: 10px 0;
}

#entry table.table1{
    border-collapse: collapse;
    margin: 50px 0 0 0;
    line-height: 1.6;
    font-size: 16px;
}

#entry .table1 th,
#entry .table1 td {
    padding: 10px;
}

#entry .table1 tr{
    border-top: solid 1px #e3007f;
    border-bottom: solid 1px #e3007f;
}

#entry .table1 th{
    white-space: nowrap;
    text-align: center;
    font-weight: normal;
    line-height: 1.2;
    color: #e3007f;
    font-size: 18px;
}

@media screen and (max-width: 900px) {
    #entry .table1 .t14{font-size: 12px;}
    #entry .table1 th, #entry .table1 td{width:95%; display:block;text-align: left; font-size: 15px;}
    #entry .table1 th{padding: 16px 10px 0 10px;}
}

#entry .txt1{
    font-size: 20px;
    font-weight: bold;
}


#entry .yellow-waku .num{
    font-size: 70px;
    margin: 0 0 10px 0;
    font-family: "Noto serif JP";
}

#entry .container h3{
    font-size: 20px;
    margin: 6px auto 18px auto;
    color: #e3007f;
    padding: 4px 10px 18px 10px;
    line-height: 1;
    text-align: center;
}

#entry .container h4{
    font-size: 24px;
    margin: 16px 0 3px 0;
}

#entry .container h5{
    font-size: 18px;
    margin: 16px 0 0px 0;
    color: #e3007f;
    font-weight: normal;
}

#entry .waku1{
    padding: 8px;
}

#entry .waku2{
    padding: 14px;
}


#entry .yellow-waku ul.list-kuromaru{
    font-size: 15px;
}

#entry .map-hannyu-pc{
    float: right;
    width: 400px;
    text-align: right;
}

#entry .map-hannyu-sp{
    margin: 20px 0 ;
}

#entry .link-about a{
    text-decoration: none;
    background-color: #e3007f;
    line-height: 1;
    color: #fff;
    text-align: center;
    padding: 6px;
    margin: 5px 10px;
    display: block;
    width: 200px;
    float: left;
    transition: all 0.6s;
}

#entry .link-about a:hover{
    transition: all 0.3s;
    opacity: 0.8;
    color: #fff;
}

#entry .form{
    border: 1px solid #e3007f;
    padding: 0 26px 26px 26px;
    max-width: 1100px;
}

#entry .form-waku{
    border: 2px solid #e3007f;
    max-width: 800px;
    margin: 80px auto;
    text-align: center;
    padding: 6px;
}

#entry .form-waku img{
    width: 160px;
    margin-top: -70px;
}

#entry .form ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 600px;
    margin: 16px auto;
}

#entry .form li{
	color: #fff;
  font-size: 16px;
  background: #e3007f;
  padding: 8px 0px;
  transition: .3s;
  width: 160px;
  margin: 10px;
}

#entry .form li:hover{
    background: #EB59AB;
}

#entry .form a{
    transform: scale(1.0);
    transition: all 0.3s;
}

#entry .form a:hover{
    transform: scale(1.1);
    transition: all 0.3s;
}



/*========= result */

#result .table1 img{
    width: 100%;
    min-width: 960px;
    margin: 0px 0 10px 0;
}

#result .tit{
    font-size: 22px;
    margin-top: 50px;
}

#result h1{
    font-weight: normal;
}

#result .pdf-aria{
    border: 2px solid #FFE100;
    padding: 26px;
    background-repeat: repeat;
    max-width: 1100px;
}

#result .pdf-waku{
    border: 2px solid #E95532;
    max-width: 1100px;
    margin: 80px auto;
    text-align: center;
}

#result .pdf-waku img{
    width: 28px;
    margin-top: -30px;
    margin-bottom: 8px;
}

#result .pdf-aria ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 16px auto;
}

#result .pdf-aria li{
	float: left;
	width:140px;
	margin: 20px;
	font-size: 22px;
	line-height: 1;
	text-align: center;
    color: #003893;
    padding: 0px 16px 20px 16px;
    border-radius: 10px;
    background-color: #FFE102;
    transition: all 1s 0s ease-in-out;
}

#result .pdf-aria li:hover{
    background-color: #003893;
    color: #FFE102;
}

/*works ==========================================================*/

#works .page-title{
    padding-bottom: 10px;
}

#works .title-exp,
#about .title-exp{
    text-align: center;
    margin-bottom: 30px;
}

#works ul.page-link-to{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 16px auto;
}

#works .page-link-to li{
	float: left;
	width:140px;
	margin: 20px;
	font-size: 22px;
	line-height: 1;
	text-align: center;
    color: #003893;
    padding: 20px 16px;
    border-radius: 10px;
    background-color: #FFE102;
    transition: all 1s 0s ease-in-out;
}

#works .page-link-to li:hover{
    background-color: #003893;
    color: #FFE102;
}

#works .page-link-to .spe{
    padding: 8px;
    border-radius: 6px;
}

#works .caution2{
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 30px;
}


#works li.color2{background-color: #E95532; color: #fff;}

#works .cate_spe{
    border: 2px solid #E95532;
}

#works .category{
    margin: 100px auto;
    padding: 20px 20px 60px 20px;
    border-top: 8px solid #E95532;
    text-align: center;
    max-width: 1400px;
}

#works .cate-color1{background-color: #eee; border-radius: 16px; padding: 20px 6% 40px 6%;background-image: url("img/top_sho-bg.png");background-repeat: repeat; border: none;}
#works .cate-color2{background-color: #FF4646; border-radius: 16px; padding: 20px 6% 40px 6%;}

#works .category-tit{
    font-size: 34px;
    margin-bottom: 30px;
    text-align: center;
    color: #E95532;
}

#works .cate-color1 .category-tit{color: #000;}
#works .cate-color2 .category-tit{color: #fff;}

#works .category ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
    max-width: 1300px;
    margin: 0 auto;
}

#works .category li{
    padding: 0 0px 8px 0px;
    width: 32%;
    min-width: 310px;
    margin: 2px 2px;
    line-height: 1.3;
}

#works .sho-tit{
    font-size: 20px;
    margin: 30px 20px 10px 20px;
    background-color: #FFE100;
    padding: 4px 0px;
}

#works .color-gray{
    font-size: 18px;
}

#works .img-wrap{
    height: 308px;
    vertical-align: middle;
    text-align: center;
    margin: 4px auto;
}

#works .category img{
}

@media screen and (max-width: 1110px) {
    #works .category li{width:49%;}
}

@media screen and (max-width: 770px) {
    #works .category li{max-width: 460px; width: 80%;}
    #works .category ul{justify-content: center;}
}

#works .go-pdf{
    margin: 10px;
}

#works .go-pdf a{
    text-decoration: underline;
}

#works .waku-white{
    background-color: #fff;
    padding: 10px;
}

#works img.img-gaishou{
    max-width: 600px;
    width: 100%;
}

#works img.img-shou{
    max-width: 300px;
    width: 100%;
}

#works .cate-color1 img.pc{
    float: left;
}

@media screen and (min-width: 901px) {
    #works .waku-white{padding: 20px 40px;}
    #works .r-txt{float: right; width: calc(100% - 460px); padding-top: 140px;}
    #works .cate-color2 .r-txt{width: calc(100% - 340px); padding-top: 140px;}
}

.spacer2{
    height: 90px;
}


/*about ==========================================================*/

#about .page-title{
    padding-bottom: 10px;
    
}


#about table.list{
    margin: 80px 0;
    border-collapse: collapse;
    width: 100%;
}

#about table.list th,
#about table.list td {
    padding: 10px;
    border-top: solid 1px #E95532;
    border-bottom: solid 1px #E95532;
}

#about .list th{
    font-size: 17px;
    color: #666;
    vertical-align: top;
    padding: 2px 8px 2px 2px;
    font-weight: normal;
    line-height: 1.3;
}

#about .list td{
    line-height: 1.3;
    vertical-align: top;
    padding: 2px 2px 8px 2px;
    font-size: 18px;
    color: #E84947;
}

#about .list a{color: #E95532;}
#about .list a:hover{color: #E95532;}

#about .entry-oowaku{
    max-width: 1100px;
    margin:0 auto;
}


#about .entry-waku{
    padding: 40px;
    border-radius: 30px;
    margin: 60px 20px 30px 20px;
    border: solid 3px #FFE100;
}

#about .entry-date{
    font-size: 14px;
    color: #E95532;
    padding: 5px 0px;
    line-height: 1;
}

#about .entry-title{
    font-size: 22px;
    color: #E95532;
    line-height: 1.3;
    margin: 3px 0px 10px 0px;
}

#about p{
    margin: 0 6px 0 0px ;
}

#about p a{text-decoration: underline;}

@media screen and (min-width: 801px) {
    #about .entry-title{font-size: 26px;}
    #about .list th{width: 100px;}
}

/*========= ローディング ===============*/



.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(27deg, rgba(255,255,255,1.00), rgba(203,241,245,1.00)70%),linear-gradient(270deg, rgba(246,253,252,1.00), rgba(191,233,242,1.00)70%);
    padding-bottom: 120px;
    z-index: 9999;
}

#kata .loader-wrap {background: linear-gradient(27deg, rgba(255,255,255,1.00), rgba(255,255,255,1.00)70%),linear-gradient(270deg, rgba(255,255,255,1.00), rgba(255,255,255,1.00)70%);}


.loading-leaf{
    width: 200px;
    left: calc(50% - 100px);
    position: absolute;
    animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}

.loader {
  text-indent: -9999em;
  overflow: hidden;
  }
  

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}




/*========= ページトップボタンのためのCSS ===============*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:rgba(233,81,47,0.70);
	border-radius: 20%;
	width: 60px;
	height: 60px;
    margin-bottom: 20px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
    box-shadow: rgba(50, 50, 93, 0.1) 0px 50px 100px -20px, rgba(0, 0, 0, 0.1) 0px 30px 60px -30px, rgba(10, 37, 64, 0.15) 0px -2px 6px 0px inset;

}

#page-top a:hover{
	background:rgba(233,81,47,1.0);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}