@charset "utf-8";


@import url("framework.css");

@font-face {
  font-family: 'Hannari';
  src: url('../font/Hannari.woff') format('woff');
}


/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{padding:20px 0;}

#header #logo *{margin:0; padding:0; line-height:1;}
#header #logo h1{display:inline-block; position:relative; padding-bottom:8px; font-size:32px;}
#header #logo h1::before, #header #logo h1::after{display:block; position:absolute; bottom:0; width:100%; height:1px; content:"";}/* Creates the 2 lines underneath the logo */
#header #logo h1::before{bottom:3px;}
#header #logo h1 span{text-transform:uppercase;}

#header ul{}
#header ul li{}
#header ul li div{position:relative; min-height:30px; padding:0 0 0 55px; line-height:1;}
#header ul li div i{position:absolute; top:0; left:0; width:45px; height:43px; font-size:40px; text-align:center;}
#header ul li div span{display:block;}
#header ul li div strong{display:block; margin:0 0 8px 0;}

#header div:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */



/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:80px 50px;}

/* Content */
.container .content{}

.sectiontitle{display:block; max-width:55%; margin:0 auto 80px; text-align:center;}
.sectiontitle *{margin:0;}


.insta {
	width: 100%;
    padding: 0.5em 0.5em;
    margin: 1em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.insta p {
    margin: 0; 
    padding: 0;
}

.box_flex{display: flex;}


.title02{
  color: #F63;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #F63;
  font-size:1.2rem;
  padding: 5px 0;
  margin:0 0 15px 0;
}



/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:100px 20px 0px 20px;}

#footer .heading{margin-bottom:50px; font-size:1.2rem;}

#footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}

#footer button{padding:8px 18px 10px; text-transform:uppercase; font-weight:700; cursor:pointer;}

.latestimg{}
.latestimg > li{display:inline-block; float:left; width:30%; margin:0 0 5% 5%;}
.latestimg > li:nth-last-child(-n+3){margin-bottom:0;}/* Removes bottom margin from the last three items - margin is restored in the media queries when items stack */
.latestimg > li:nth-child(3n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */
.latestimg > li img{width:100%;}/* Force the image to resize to take the full space - may have to be changed for tablets, depends on personal preference */


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:10px; line-height:10px;}



/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:180px; height:130px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.8;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:none; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 5px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:#FFFFFF; background-color:#2A2D34;}
.faico a:hover{}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}



/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#333;}
a{color: #09C;}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#95103B;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.40);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}

.btn, .btn.inverse:hover{color:#F00; background-color:#FCC; border: dashed 3px #F00; border-radius:30px;}
.btn:hover, .btn.inverse{color:#fff; background-color:#F00; border-color:#FCC;}

.imgover:hover::before{background:rgba(0,0,0,.55);}
.imgover, .imgover:hover::after{color:#95103B;}


/* Rows */
.row0{color:#474747; background-color: inherit;}
.row1, .row1 a{color:#333; background-color:inherit;}
.row2{color:#474747; background-color:#fff;}
.row3{color:#474747; background-color:#fff;}
.row4{color:#300; background-color:#fff;}
.row5, .row5 a{color:#C1C2C4; background-color:#2A2D34;}

.gradient{color:#FFFFFF; background:linear-gradient(to bottom right, #8F9297, #C1C2C4);}


/* Header */
#header #logo h1::before{background-color:#474747;}
#header #logo h1::after{background-color:#95103B;}
#header #logo h1 a{color:inherit;}
#header #logo h1 span{color:#95103B;}


/* Search Form */
#searchform{color:rgba(255,255,255,.5); background:#AA5670;}
#searchform:hover{color:#95103B;}
#searchform input{color:#FFFFFF; background:#AA5670;}
#searchform button{color:#FFFFFF; background:transparent;}


/* Page Intro */
#pageintro{color:#FFFFFF;}


/* Content Area */
.ringcon{color:#FFFFFF; background-color:#09C;}
.ringcon::before{background-color: #0CF; border-color:rgba(255,255,255,.3);}
.ringcon:hover{background-color:#0CF;}
.ringcon:hover::before{background-color:#09C;}

.overview a{color:inherit;}
.overview article:hover a{color:#95103B;}


/* Latest */
#latest article .excerpt{color:inherit; background-color:#FFFFFF; border-color:rgba(0,0,0,.2);}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#474747; background-color:#C1C2C4;}
#footer input:focus{border-color:#95103B;}
#footer button{color:#FFFFFF; background-color:#95103B;}


/* Navigation */
#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#95103B;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#95103B;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#95103B;}

/* #backtotop{color:#FFFFFF; background-color:#95103B;} */



/* お知らせ
------------------------------------------------------------------------------------------------------------ */

.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
}
.news-list .item{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #333;
  border-bottom: 1px dashed #F06;
  padding: 20px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 200px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news-list .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0 20px 0 0;
}
.news-list .item .category span{
  background: #999;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #00F;
}

@media screen and (max-width: 767px){
.news-list .item{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}





/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1100px){
	.hoc{max-width:1100px;}
}

@media screen and (min-width:978px) and (max-width:1100px){
	.hoc{max-width:95%;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.hoc{max-width:90%;}

	#header{}

	#mainav{width:80%; padding:15px 0 0 0;}
	#mainav ul{display:none;}
	#mainav form{display:block;}

	#breadcrumb{}

	.container{padding:40px 30px;}

	.wrapper{display:block; position:relative; max-width:92%; margin:0 auto; padding:0; text-align:left; word-wrap:break-word;}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
	
	#about .one_third{display:block; float:none; width:auto; margin:0; padding:0;}

	#header{}

	.container{padding:30px 5px;}

	#mainav{float:none; width:100%; padding:15px 0;}
	#searchform{display:none;}

	#pageintro article{max-width:none;}
	#pageintro .heading{font-size:2rem;}
	#pageintro p:first-of-type{font-size:1rem;}

	.sectiontitle{max-width:none;}
	
	
	.order1 {order: 1;}
	.order2 {order: 2;}
	.order3 {order: 3;}
	
	 .box_flex{flex-direction: column;}

	.overview > li:nth-last-child(-n+3){margin-bottom:30px;}

	#latest article{max-width:348px;}/* Change it to suit your needs - default is the one_third grid width */

#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:5px; right:5px; width:90px; height:65px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}


	#footer{padding:100px 20px 10px 20px;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.3rem;}
	.font-x3{font-size:1.8rem; line-height:}
}