/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　共通
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
.flex {display: flex;}

* {/*font-family: "小塚ゴシック Pro";*/font-family: 'Noto Sans JP', sans-serif;}
/* font IEだけに適応 */
_:lang(x)::-ms-backdrop, * {font-family: 'Noto Sans JP', sans-serif;}
.niko {font-family: "Nico Moji";}
.sawa {font-family: "Sawarabi Gothic";}

h1 {color: #3fa9f5;}
h2 {color: #3fa9f5;}
h3 {color: #3fa9f5;}
a {color: #000;}

.title {color: #3fa9f5;}
.kiiro {color: #ffa500;}
.sub-title {color: #3fa9f5;}


/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　共通部品
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
/*ハンバーガーメニュー モーダルの時に表示されないようにした*/
#header article {z-index: 1035;}

/*パンくずリスト*/
.breadcrumb {margin-bottom: 15px;}
.breadcrumb li:after {content: '>'; padding: 0 0.2em; color: #3fa9f5;}
.breadcrumb li:last-child:after {content: '';}
.breadcrumb li:before {content: "・"; display: none;}
.breadcrumb li a:hover {color: #fff; background-color: #3fa9f5;}
.breadcrumb li a span {color: #3fa9f5;}

/*::markerが付いていたので*/
#bylaw .breadcrumb {padding-left: 0}
#bylaw .breadcrumb li {display: block;}

/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　ヘッダー(#header)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
#header {width: 100%;}

/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　トップページ(#top)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
/*あとで消す*/
#header .header-main {height: 2000px;}

/*共通*/
#top h3 {margin-bottom: 45px;}

/*新着 NEWS*/
#top .sub-news {background-color: #d9eefd;}
#top .sub-news h2 {font-size: 20px; margin-bottom: 40px; color: #666;}

/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　ギャラリーページ　(#gallery)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
/*#gallery {}
#gallery .page-numbers {
    text-align: center;
    list-style-position: inside;
    list-style-type: none;
    padding: 0;
}
#gallery .page-numbers li {
    display: inline-block;
}
#gallery .page-numbers a {
    display: inline-block;
    padding: .5rem;
    margin: 0 .2rem .2rem 0;
    background: #fff;
    border: 1px solid #ccc;
}
#gallery .page-numbers span {
    display: inline-block;
    padding: .5rem;
    margin: .2rem;
    border: 1px solid #ccc;
}*/
.pagination {margin: 40px 0 0;}
/*.nav-links {
    display: flex;
}*/
.pagination .pnavi {display: flex; justify-content: center;}
.pagination .page-numbers {
    display: inline-block;
    margin-right: 20px; 
    color: #333;
    border-radius: 3px;
    box-shadow: 0 3px 3px #999;
    background: #fff;
}
.pagination .current {background: #69a4db; color: #fff;}
.pagination .prev,
.pagination .next {
    background: transparent;
    box-shadow: none;
    color: #69a4db;
}
.pagination .dots {background: transparent; box-shadow: none;}


/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　ポートフォリオ　(#portfolio)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
#portfolio h1 {color: #8CCBF9;}
#portfolio h2 {color: #3fa9f5;}
#portfolio .box {
	background-color: #3fa9f5; 
	background-color:rgba(63,169,245,0.5);
}
#portfolio .box .port-wrap .imag img {
	object-fit: cover;
	object-position:30% 10%;
}
/* もっと見る */
#portfolio .box.is-hidden {
	visibility: hidden;
	opacity: 0;
	height: 0;
	margin: 0 10px;
	padding: 0;
}
/* もっと見るボタン */
#portfolio .more {text-align: center; margin-top: 20px; margin-bottom: 100px;}
#portfolio .more button {
	background-color: #6bb6ff;
	border: none;
	cursor: pointer;
	outline: none;
	color: #fff;
	padding: 0;
	line-height: 40px;
	width: 180px;
	border-radius: 20px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
	transition: 0.3s ease-in-out;
}
#portfolio .more button:hover {
	background: #FFF;
	color: #6bb6ff;
	box-shadow: 0 15px 30px -5px rgb(0 0 0 / 25%);
	transform: translateY(-4px);
}


/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　お問い合わせ　(#contact)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
#contact {display: block;}
#contact h2.contact-title {font-size: 15px;}
#contact .contact-text p {font-size: 15px;}
#contact .contact-text a {border-bottom: solid 0.5px #000;}
#contact .contact-text a:hover {background-color: #3fa9f5;}
#contact .form .form-item p.form-item-label {font-size: 20px;}
#contact .form .form-item p.form-item-label span {margin-left: 1em;}
#contact .form .form-item input.form-item-input {
	width: 100%;
	margin: 0 -3px;
	border: 1px solid #ddd;
	background: #eeeded;
}
#contact .form .form-item textarea.form-item-textarea {
	width: 100%;
	height: 423px;
	margin: 0 -3px;
	border: solid 1px #ddd;
	background: #eeeded;
}
#contact .form .form-item.btn {
	display: flex;
	justify-content: flex-end;
}
#contact .form .form-item .form-btn {
	height: 50px;
	font-size: 20px;
	color: #fff;
	background: #3FA9F5;
}

#contact .contact-title {color: #000;}


/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　プライバシーポリシー　(#privacy-policy)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
#privacy-policy {display: block;}
#privacy-policy a {color: #3fa9f5;}
#privacy-policy a:hover {color: #fff; background-color: #3fa9f5;}
#privacy-policy h1 {text-align: center;}
#privacy-policy .priv-sub-t {text-align: center; padding-bottom: 10px;}
#privacy-policy h2 {text-align: center;}
#privacy-policy h2 {border-top: solid 1px; border-bottom: solid 1px; margin: 30px 0 15px;}
#privacy-policy h3 {margin: 30px 0 15px;}
#privacy-policy h3:before {content:"◆";} 
#privacy-policy p {text-align: left;}

/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　利用規約　(#bylaw)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
/*お問合せフォーム*/
#bylaw {display: block;}
#bylaw a {color: #3fa9f5;}
#bylaw a:hover {color: #fff; background-color: #3fa9f5;}
/*本文*/
#bylaw h1,
#bylaw h2 {text-align: center;}
#bylaw h2 {border-top: solid 1px; border-bottom: solid 1px; margin: 30px 0 15px;}
#bylaw ul {margin-left: 1em;}
#bylaw ul li {list-style-type: disc;}
#bylaw h3 {margin: 30px 0 15px;}
#bylaw h3:before {content:"◆";} 
#bylaw p {text-align: left;}
/*トップへ戻る*/
#bylaw .top-bt {text-align: center;}
#bylaw .top-bt a {
  border: solid 1px #3fa9f5; 
  background-color:#3fa9f5; 
  border-radius: 20px; 
  padding: 7px; 
  color: #fff;
}
#bylaw .top-bt a:hover {background: #fff; color:#3fa9f5;}


/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　404　(#not-found)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
/*#not-found {height: 100%;}
#not-found .wrap{
	background-image:url("../img/background.png"); 
	background-size: contain; 
	padding: 50px 0;
}
#not-found .wrap .container {
	text-align: center; 
	border: solid 2px #fff; 
	background-color:rgba(255,255,255,0.9);
	padding: 20px 0;
}
#not-found .wrap h1 {font-weight: 700;}
#not-found .wrap p {padding-bottom: 10px; font-weight: 700;}
#not-found .wrap a.top {
	border: solid 1px #3fa9f5; 
	background-color:#3fa9f5; 
	border-radius: 20px; 
	padding: 7px; 
	color: #fff;
}*/

#not-found .bg {
	background-image:url("../img/background.png");
	background-repeat: no-repeat; 
	background-size: 100%;
	/*background-size: cover;*/
	padding: 30px 0;
}
#not-found .bg .message {
	text-align: center; 
	border: solid 2px #fff; 
	background-color:rgba(255,255,255,0.9);
	padding: 20px 0;
}
#not-found .bg .message h1 {font-weight: 700;}
#not-found .bg .message p {padding-bottom: 10px; font-weight: 700;}
#not-found .bg .message a.top {
	border: solid 1px #3fa9f5; 
	background-color:#3fa9f5; 
	border-radius: 20px; 
	padding: 7px; 
	color: #fff;
}


/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
　　フッター(#footer)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
#footer {width: 100%; background-color:#3FA9F5; /*position: fixed; bottom: 0;*/}
#footer a {color: #fff; text-decoration:underline;}
#footer p {color: #fff;}
#footer .f-link li {margin-right: 20px;}
#footer .f-link li:last-child {margin-right: 0;}
#footer .f-link li:hover {transition: .5s; opacity: 0.7;}

/*------------------------------
 戻るボタン
------------------------------- */
#page-top{
	position: fixed;
	z-index: 100;
	margin-right: 5%;
}
#page-top a{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #3FA9F5;
    border: 1px solid #fff;
    padding-top: 25px;
    text-align: center;
    /*letter-spacing: -1px;*/
    line-height: 0.5;
    /*font-size: 14px;*/
    text-decoration: none;
    color: #fff;
    opacity: 0.8;
    border-radius: 50%;
    position: relative;
}
#page-top a span{
    color: #fff;
    font-size: 8px;
}
#page-top a::before{
	content:'';
	display: block;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    width: 25%;
    height: 25%;
    top: 20%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
#page-top a:hover{
	text-decoration: none;
    opacity: .5;
}