/*親テーマを継承*/
/*!
Theme Name: habakiri-child
Theme URI: http://habakiri.2inc.org/en/
Author: inc2734
Author URI: http://2inc.org
Description: Habakiri is the simple theme based on Bootstrap 3. This theme's goal is to create a responsive, bootstrap based WordPress theme quickly. The design is very simple, easy to create of child theme. Features are, 100% responsive layouts, the Glyphicons, Genericons, Font Awesome icons, 7 page templates, 8 header design patterns, many color settings, a lot of hooks, related posts, minified CSS and JavaScript, Sass and PHP Class in functions.php.
Version: 2.5.2
Text Domain: habakiri
License: GPLv2 or later
License URI: license.txt
Tags: white, fixed-layout, fluid-layout, responsive-layout, one-column, two-columns, left-sidebar, right-sidebar, editor-style, sticky-post, microformats, featured-images, custom-colors, custom-menu, custom-background, custom-colors
Template: habakiri
*/

/*フォントの設定*/
body {
    /* ゴシック体の場合 */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;

    line-height: 1.8;
    font-weight: 500;
}

.menu-item, .section__title, .page-header__title {
    font-family: "Cabin", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}

p, ul, ol, dl, table {
    margin-bottom: 20px;
}

h2, .h2 {
    font-size: 26px;
    margin: 40px 0 20px;
}

h3, h3 {
    font-size: 22px;
}

/*copyrightの設定*/
.copyright{
  background-color: #333745;
  color: #fff;
  font-size: 10px;
  padding: 15px 0;
  text-align:center;
}

/*footerのsnsリンク*/
.social-nav ul li a:before{
  font-size:18px;
}

.responsive-nav a strong{
  font-weight:700;
}

/* contact-formのデザイン */
#123{
background-color: #f7f7f7;
    border: 2px solid #0f0;
}


input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}
/*contact-formここまで*/

/*ヘッダーのタイトル部分のスタイル*/
.page-header__title {
    font-size:32px;
}

/*トップイメージの下の間隔を調整*/
.section__title{
    margin-bottom:20px;
}
.sub-page-contents{
    padding-top:10px;
}

.section{
   padding-top:20px;
}
/* ここまで */

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
	transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
	transition: all 0.2s ease-in-out;
}

/* NEWSのスタイル */
.news ul li{
	list-style:none;
}
.news{
  text-align:center;
}

.readmore{
   color: #ea2e49;
}
.readmore a{
   text-decoration:none;
}

.contents_area{
  text-align:center;
}

.cover{
   /* box-shadow */
box-shadow:1px 1px 3px 2px #dbdbdb;
-moz-box-shadow:1px 1px 3px 2px #dbdbdb;
-webkit-box-shadow:1px 1px 3px 2px #dbdbdb;
    transition: 0.2s;
}
.cover:hover{
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		transform: rotate(3deg);
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.top-join-us{
border:solid 1px #ccc;
}

.circle-btn{
  display: inline-block;
text-decoration: none;
color: #668ad8;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
border: double 4px #668ad8;
text-align: center;
vertical-align: middle;
overflow: hidden;
transition: .6s;
}.btn:hover{
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}

#a2, #a1, #a0{
   margin-top:-120px;
  padding-top:120px;
}

.btn-or{
  max-width:600px;
  width:90%;
  padding:6px;
  margin:6px auto;
  color:#333745;
  background-color:white;
  border:1px solid #333745;
}

.btn-or:first-child{
  margin-top:0px;
}

.btn-or:hover{
  background-color:#333745;
  color:#fff;
}