@charset "UTF-8";
/*
Theme Name: クリエイトグループサイト
*/
/*--------------------------------------------------
SP
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 980px) {
html, body, div, span, 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, sub, 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, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-family: 'Noto Sans JP', sans-serif;

}

* 
{
margin: 0;
padding: 0;
}

p{
font-size:16px;
}

dt{
float: left;
}

dd{
margin-left: 60px;
padding-bottom: 10px;
}

/*---特殊追加CSS---*/
.clear{clear: both;}
/*---特殊追加CSS---*/

body 
{
-webkit-text-size-adjust: 100%;
line-height: 1;
font-size: 16px;
color: #000;
margin: auto;
font-family: 'Noto Sans JP', '小塚ゴシック Pr6N R', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
overflow-x: hidden;
background-color: #fff;
}

a:hover
{
opacity: 1.0; filter: brightness(110%);
-webkit-transition: all .2s; transition: all .2s;
}

img{
max-width: auto;
height: auto;
}

img[src*='.svg']
{
width: 100%;
height: auto;
}

.br::before {
content: "\A" ;
white-space: pre ;
}

	
#wrap{
width: 100%;
height: auto;
border-top: solid #fff 1px;
}
	
#header_content{
width: 100%;
height: auto;
padding: 20px 0 20px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
background: #fff;
position:fixed;
z-index: 2;
margin-top: -2px;
}
	
#header_content img{
display: block;
margin-left: 10px;
width: 80%;
}

	
/* ハンバーガーメニュー 構文*/
.hamburger {
width: 45px;
height: 45px;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right:10px;
top:20px;
z-index: 2;
}

.hamburger:hover {
cursor: pointer;
}
.hamburger span {
background: #2e4fb5;
width: 35px;
height: 2px;
position: absolute;
right: 0%;
transition: 0.3s ease-out;
}
.hamburger span:nth-child(2) {
width: 30px;
display: block;
position: absolute;
right: 0%;
top:49.5%;
}	
.hamburger.active span{
background: #fff;
width: 35px;
height: 2px;
position: absolute;
transition: 0.3s ease-out;
}	
.hamburger span:nth-of-type(1) {
top: 10px;/* アクティブ前の記述　*/
}
.hamburger span:nth-of-type(3) {
bottom: 10px;/* アクティブ前の記述　*/
}
/* ハンバーガーメニュー 構文　*/
	
/* ハンバーガーメニューにactiveクラスがついたときのスタイル　三角形 */
.hamburger.active span:nth-of-type(1) {
transform: translateY(9px) rotate(-45deg);
transition: 0.3s ease-out;
top: 15px;/* アクティブ後の記述　*/
}
.hamburger.active span:nth-of-type(3) {
transform: translateY(-9px) rotate(45deg);
transition: 0.3s ease-out;
}
.hamburger.active span:nth-of-type(2) {
opacity: 0;
}
/* ハンバーガーメニューにactiveクラスがついたときのスタイル　三角形 */

/* メニュー　クリックしたときに表示されるCSS */
.menu {
z-index: 1;
position: fixed;
top: 0;
right: 0;
width: 220px;
height: 1000px;
background-color: #2e4fb5;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
padding-top: 60px;
}
.g_nav_inner{
width: 70%;
margin: 40px 0 0 40px;
}	
ul.g_nav_inner li a{
display: block;
list-style: none;
font-weight:bold;
color: #fff;
margin-bottom: 40px;
}	
/* メニュー　クリックしたときに表示されるCSS */
	
/* メニューにopenクラスがついたときのスタイル */
.menu.open {
transform: translate(0px);
transition: 0.4s ease-out;
}
/* メニューにopenクラスがついたときのスタイル */

/* バーガーメニュー外タップ時のモーショーン */	
.main_cover {
    position: fixed;
    width: 100%;
    visibility: hidden;
    z-index: -1;
    -webkit-transition: .3s;
    -webkit-transition: .4s;
    transition: .4s;
  }
.main_cover.active {
    height: 100%;
    visibility: visible;
    z-index: 0;
  }
/* バーガーメニュー外タップ時のモーショーン */	
	
#mv_content{
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin-top: 76px;
}
#mv_content img{
width: 100%;
height: auto;
}	
	
#main_content,#main_content_under{
width: 100%;
height: auto;
background-image: url("img/create_background_sp.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 60px 0 40px 0;

}
	
#main_content_under{
background: #fff;
}
	
.content,.content_3{
width: 95%;
height: auto;
margin: auto;

}
	
.content h2,.content_3 h2{
font-size:35px;
font-weight:bold;
text-align: center;
padding-bottom: 20px;
background-image: url("img/title_under.png");
background-repeat: no-repeat;
background-position: bottom;
margin-bottom: 30px;
}
.content p{
width: 100%;
height: auto;
margin: auto;
text-align: left;
line-height: 2.6;
font-size:15px;
font-weight:bold;
}	
	
#main_content_2{
width: 100%;
height: auto;
margin: 40px 0 80px 0;

}
.content_2{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;

margin: auto;
}
	
	.content_2 a img{
margin-top: 10px;
	}
.content_2 a img:hover{
opacity: 0.8;
}
.news_content{
width: 100%;
height: auto;
border-top:solid 1px #ccc;
}
.news_box,.news_box_under{
width: 100%;
height: auto;
padding: 30px 10px 30px 10px;
display: flex;
flex-direction: column;
border-bottom: solid #ccc 2px;
}
.news_box p:nth-child(1){
font-weight:bold;
font-size:15px;
padding-top: 5px;
width: 100px;
}	
.news_box h3{
font-weight:bold;
font-size:15px;
padding-top: 5px;
margin-top: 10px;
}	
.news_box span:nth-child(3),.news_box_under span:nth-child(3){
width: 59%;
font-weight:bold;
font-size:12px;
padding: 5px 60px 5px 60px;
margin-top: 20px;
border: solid #2e4fb5 1px;
color: #2e4fb5;
display: block;
}
.news_box_under span:nth-child(3){
width: 74%;
line-height: 1.6;
text-align: center;
padding: 5px 20px 5px 20px;
display: block;
}

.news_button p a,.news_button p a:hover{
width: 70%;
background: #000;
color: #fff;
font-weight:bold;
margin: auto;
margin-top: 60px;
display: block;
padding: 20px 0 20px 10px;
position: relative;
}
.news_button p a:hover{
background: #000;
color: #fff;
}	

.news_button p a::before{
    content: "";
    display: block;
    position: absolute;
    top: 26px;
    right: 14px;
    width: 30px;
    height: 2px;
    background: #fff;
}


.news_button p a::after{
    content: "";
    display: block;
    position: absolute;
    top: 18px;
    right: 15px;
    width: 15px;
    height: 15px;
    border: 2px solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(-135deg);
}
	
#footer_content{
width: 100%;
height: auto;
margin-top: 60px;
padding: 60px 0 30px 0;
background: #f9f9f9;
}
.footer_box{
width: 95%;
height: auto;
margin: auto;

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.footer_box_1,.footer_box_2,.footer_box_3{
width: auto;
height: auto;

}
.footer_box_1{
margin-bottom: 40px;
	}
.footer_box_1 img{
margin-bottom: 10px;
display: block;
}
.footer_box_1 p a,.footer_box_2 p a,.footer_box_3 p a{
font-weight:bold;
display: block;
padding-top: 20px;
font-size:12px;
}
.footer_box_2 p a:before,.footer_box_3 p a:before{	
content: '●';
font-size: 16px;
color: #2e4fb5;
vertical-align: text-top;
padding-right: 5px;
}
.footer_content_2{
width: 100%;
height: auto;
margin: auto;
margin-top: 60px;
}
.footer_content_2 p{
text-align: center;
font-weight:bold;
font-size:12px;
}
	
	
/* 下記から下層コンテンツページ */
	
#under_content_mv{
width: 100%;
height: 180px;
background-image: url("img/under_header_img.png");
background-repeat: no-repeat;
background-position:center;
background-size: cover;
margin-top: 76px;
}	
.under_content_mv_title{
width: 90%;
height: 180px;
margin: auto;

}
.under_content_mv_title h2{
text-align: center;
color: #fff;
font-size:25px;
font-weight:bold;
padding-top: 60px;
}
.under_content_mv_title p{
text-align: center;
color: #fff;
font-size:12px;
font-weight:bold;
padding-top: 10px;
}
.group_content,.group_content_last{
width: 95%;
height: auto;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: space-between;
border-top:solid #2e4fb5 2px;
border-bottom:solid #2e4fb5 2px;
border-right:solid #2e4fb5 2px;
margin-top: 20px;
margin-bottom: 90px;
}
.group_content_last{
margin-bottom: 0px;
}
.group_content_left{
width: 100%;
height: auto;
padding-left: 20px;
position: relative;

}
.group_content_left p:nth-child(1),.group_content_left p.group_category_2{
width: 110px;
height: 45px;
color: #fff;
font-size:20px;
font-weight:bold;
padding: 15px 0 0 10px;
border-radius:0px 50px 50px 0px;
background: #2e4fb5;
position: absolute;
top: -30px;
left: -2px;
}	
.group_content_left p.group_category_2{width: 300px;}
.group_content_left p.group_category_3{width: 320px;}
.group_content_left p.group_category_4{width: 300px;}
.group_content_left p.group_category_5{width: 180px;}
.group_content_left p.group_category_6{width: 220px;}
.group_content_left h2{
height: 60px;

font-size:25px;
font-weight:bold;
background-image: url("img/title_under.png");
background-repeat: no-repeat;
background-position: 0% 100%;
margin: 50px 0 20px 0;
}
.group_content_left h2 span{
color: #2e4fb5;
}
.group_content_left p:nth-child(3){
width: 95%;
font-size:14px;
text-align: justify;
font-weight:bold;
line-height: 2.4;
}	
.group_content_right{
width: 360px;
padding-top: 30px;
}	
.group_content_right img{
display: block;
width: 85%;
margin: auto;
margin-bottom: 10px;
}	
	
/* 新着情報 */
.news_content_under{
width: 90%;
height: auto;

margin: auto;
}
	
	
	
.single_data{
width: 100%;
height: auto;
padding-bottom: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-bottom: solid #ccc 1px;
}
.single_data p:nth-child(1),.single_data p:nth-child(2){
font-weight:bold;
}
.single_data p:nth-child(2){
color: #2e4fb5;
margin-top: 10px;
}
.single_content{
width: 100%;
height: auto;
margin-top: 40px;

}
.single_content h2{
height: 30px;
font-size:22px;
padding: 5px 0 0 10px;
border-left:10px #2e4fb5 double;
margin-bottom: 20px;
}	
.single_content p{
line-height: 1.8;
font-size:14px;
text-align: justify;
}
	
	
/* コンテンツフェードイン */
.effect-fade {
opacity: 0;
transform: translate(0, 100px);
transition: all 2000ms;
}
.effect-scroll {
opacity: 1;
transform: translate(0, 0);
}
.fadein {
opacity: 0;
transform: translate(0,0);
transition: all 1.5s;
}
.fadein-left{
transform: translate(-30px,0);
}
.fadein-right{
transform: translate(50px,0);
}
.fadein-up{
transform: translate(0,-30px);
}
.fadein-bottom{
transform: translate(0,30px);
}
.scrollin{
opacity: 1 !important;
transform: translate(0, 0) !important;
}
.fade-in {
opacity: 0;
transition-duration: 1000ms;
transition-property: opacity, transform;
transform: translate(50px, -20px);
}
.fade-in-up {
transform: translate(0, 50px);
}
/* コンテンツフェードイン */
	
	
	
	
}