/*レスポンシブに関する記述（共通）*/

@media screen and (max-width: 1280px) {
    .hero img {
        width: 400px;
    }
    .hero {
        width: 30%;
    }
    .menu {
        width: 700px;
        right: 0;
        top: 0;
        position: absolute;
    }
        
    .top-banner p{
        font-size: 25px;
        padding-top: 15px;
    }
    .top-img img{
        width:100%;
    }
}
@media screen and (max-width: 1120px) {
    .pc{
        display:none;
    }
    .tab{
        display:block;
    }
    .sp{
        display:none;
    }
    .tabsp{
        display:block;
    }
    
    
/*ヘッダー*/
    .hero img {
        width: 400px;
    }
    .hero {
        width: 30%;
    }
    .menu {
        width: 600px;
        right: 0;
        top: 0;
        position: absolute;
    }
    .gnav {
        height: 75px;
    }
    .menu-btn{
        width: 80px;
        background: orange;
        position: absolute;
        right: 0;
        top: 0px;
        z-index: 10;
        height: 80px;
    }
    
/*フッター*/
    .footer-box01 {
        width: 95%;
    }
    .footer-box01-00 {
        width: 30%;
    }
    
 /*------------*/   
    
    .top-banner p{
        font-size: 25px;
        padding-top: 15px;
    }
    .top-img img{
        width:100%;
    }
    
    
    .logomark{
        width:500px;
    }
    .slick-slide{
        width:500px;
    }
  /*  .frame{
        width: 550px;
        top: 180px;
        left: 50px;
        height: 300px;
    }
    
    .flame-content{
        width:550px;
    }
    */
    .slider img{
        /*width:550px;*/
        width:100%;
    }
    
    .gnav__menu a {
        font-size: 14px;
    }
    
    .content02 {
        top: 850px;
    }
    
    .change p {
        font-size: 28px;
    }
    .change img {
        width: 100px;
    }
    .problem-container {
        height: 110px;
    }
    .change-theme p {
        font-size: 22px;
    }
    
    #check {
        width: 40px;
    }

    .change-theme {
        width: 90%;
    }
    .change-theme p {
        padding: 20px 0 20px 80px;
    }
    #bluefont {
        text-align: center;
    }
    .apealbanner {
    width: 90%;
    }
    .apealbanner img{
        width: 100%;
    }
    .theme-title p {
        font-size: 30px;
    }
    .service-lineup {
        width: 95%;
        margin-left: 0px;
    }
    
    #gre-title,#ora-title {
        font-size:28px;
    }
    #ser-text {
        font-size: 18px;
    }
    
    .service-box01, .service-box02, .service-box03, .service-box04, .service-box05, .service-box06 {
        height: 250px;
    }
    .service-box01-01, .service-box04-01, .service-box05-01 {
        padding: 50px 30px 0 30px;
    }
    .service-box02-01, .service-box03-01, .service-box06-01 {
        padding: 50px 30px 0 30px;
    }
    .theme-title02 p {
        font-size: 30px;
    }
    .train-box02{
        flex-direction: column-reverse;
    }
    
    .trainning-box01-01, .trainning-box02-02 {
        width: 80%;
        margin: 0 auto;
    }
    .trainning-box01-02, .trainning-box02-01 {
        width: 80%;
        margin: 40px auto;
    }
    .trainning-box01-01 img, .trainning-box02-02 img,.trainning-box01-02 img, .trainning-box02-01 img{
        width: 100%;
    }
    .theme-title03 p {
        font-size: 30px;
    }
    .theme-title04 p {
        font-size: 30px;
    } 
    .case-detail01,.case-detail02 {
        height: auto;
        min-height: 400px;
    }
     .case-detail01 p,.case-detail02 p {
        font-size:14px;
    }
    .case-title01 p, .case-title02 p {
        height: 150px;
    }
    
    .case-title01 img, .case-title02 img {
        width: 30px;
    }
    
    .cost-box01 {
        width: 50%;
        margin: 0px auto;
    }
    
    .cost-box01 img{
        width:100%;
    }
    
    .cost-box02 {
        width: 100%;
        margin-top: 50px;
    }
    
    .cost-box02 p{
        font-size:16px;
    }
    .connect-banner{
        width: 80%;
    }
    .theme-title05 p {
        font-size:30px;
    }
    .prof-box01-01 {
        font-size: 16px;
    }
    .prof-box02 {
        width: 90%;
    }
    .prof-box02-00 {
        width: 48%;
    }
    .theme-title06 p,.theme-title07 p,.theme-title08 p {
        font-size: 30px;
    }
    
    .connect-text p {
        font-size: 30px;
    }
    


.flow-box{
    width:90%;
    margin: 0 auto;
    display:inherit;
    }

.flow-box00{
    width: 95%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    }

.flow-box00 p{
    text-align: center;
    margin-top:30px;
    font-size:16px;
    color:#3F0000;
    font-family:"BIZ UDGothic";
    }
    
    #flowimg01{
        width:15%;
    }
    #flowimg01 img{
        width:100%;
    }
    
    #flowimg02{
        width:16%;
    }
    #flowimg02 img{
        width:100%;
    }

    #flow-detail{
        width: 100%;
        height: 100px;
    }

    #flow-detail a{
        color:#7296FF;
    }

    .flow-imgbox{
        width: 30%;
    }    
    .flow-textbox{
        width:70%;
    }
    
    .qanda-box {
        width: 90%;
    }
    
    .q-text{
        padding-top:0px;
    }
    .q-text,.a-text{
        padding-left: 15px;
    }
    .contact-form {
        width:80%;
        padding-left: 0px;
    }
    #company-name, #name, #name-kana, #mail {
        width: 80%;
    }
    #prefectures {
        width: 60%;
    }
    #director {
        width: 60%;
    }
    #tel {
        width: 60%;
    }
    #contact-detail {
        width: 80%;
    }

    	/*ハンバーガーメニューに関する記述*/
	
	.title{
		display: none;
	}
	
	.site-header{
		height: 70px;
		width: 100%;
		background: #fff;
		font-size: 15px;
		display: block;
		font-weight: 600;
		padding-bottom:0px;
	　　font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	}
        .headerTitle img{
                height:40px;
        }

        .headerTitle span{
               font-size:25px;
        }

        .hiro{
			display:none;
			
			}
	
	#menu{
		/*配置*/
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 130px;
		pointer-events: none;
		z-index: 2;
		background: white;
	}

	/*メニュー開閉ボタン*/
.logo01{
    padding-top: 10px;
}

.logo01 span{
    padding-left:5px;	
}
#logo02-01{
	display:none;
	}
	
.logo02 {
    display: flex;
	padding-top:20px;
	justify-content: center;
	align-items: center;
}

#logo02-02{
	padding:0px;
	font-size: 23px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

#logo02-03{
    padding-left: 20px;
	font-size: 15px;
}
.co-title {
    font-size: 21px;
    font-family: BIZ UDゴシック;
}

    
    
#menu {
    height: 130px;
}

.menu-btn{
    width: 80px;
    height: 80px;
    background: linear-gradient(to bottom,#FFA600,#FFA600,#FF7F15,#ff7f15,#ff7f15,#ff7f15,#FFA600,#FFA600);
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
}

	#menu .menuopen{
		color: rgba(255,255,255,1);
		font-size: 34px;
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		pointer-events: auto;
		text-decoration: none;
		padding-top: 8px;
	}


	#menu .menuclose{
		color: rgba(255,255,255,1);
		font-size: 34px;
		display: none;
		width: 100%;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		pointer-events: auto;
		text-decoration: none;
		padding-top: 8px;
	}

	/*メニュー一覧*/
	#menu ul{
		background:pink;
		width:100%;
		position: absolute;
		top: 53px;
		right: 0;
		display: none;
		margin: 0;
		text-align: center;
	}

	#menu li{
		padding: 15px 0;
		color: rgba(0,0,0,1);
		border-bottom: 1px rgba(255,255,255,1) solid;
		pointer-events: auto;
		list-style: none;
		letter-spacing: 4px;
	}
	/*ハンバーガ*/
	#menu a{
		text-decoration: none;
	}
	/*li*/
	#menu li a{
		display:block;
		width:100%;
		margin: 0 auto;
		color: #607d8b;
		font-size: 15px;
	}
	/*メニューオープン時*/
	#menu:target .menuopen{
		display: none;
	}

	#menu:target .menuclose{
		display: block;
	}

	#menu:targrt .menuText{
		display: none;
	}

	#menu:targrt .closeText{
		display: block;
	}

	#menu:target ul{
		display: block;
	}
    
    
 /*---------ここからサンプル-------*/   
/*　ハンバーガーボタン　*/
    .hamburger {
        display : block;
        position: absolute;
        z-index : 3;
        right : 13px;
        top   : 12px;
        width : 42px;
        height: 42px;
        cursor: pointer;
        text-align: center;
        padding: 10px;
        background: linear-gradient(to bottom,#FFCC99,#ffa600,#ff7f15,#ff7f15,#ff7f15,#ff7f15,#ffa600,#FFCC99);
    }
    .hamburger span {
      display : block;
      position: absolute;
      width   : 30px;
      height  : 2px ;
      left    : 6px;
      background : white;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition   : 0.3s ease-in-out;
      transition        : 0.3s ease-in-out;
    }
    .hamburger span:nth-child(1) {
        top: 15px;
        left: 15px;
    }
    .hamburger span:nth-child(2) {
        top: 30px;
        left: 15px;
    }
    .hamburger span:nth-child(3) {
        top: 45px;
        left: 15px;
    }

    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
        top: 30px;
        left: 15px;
      -webkit-transform: rotate(-45deg);
      -moz-transform   : rotate(-45deg);
      transform        : rotate(-45deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
      top: 30px;
      -webkit-transform: rotate(45deg);
      -moz-transform   : rotate(45deg);
      transform        : rotate(45deg);
    }

    nav.globalMenuSp {
      position: fixed;
        z-index: 2;
        top: 0;
        right: 0;
        color: #000;
        text-align: center;
        transform: translateX(100%);
        transition: all 0.6s;
        width: 40%;
    }

    nav.globalMenuSp ul {
      background: orange;
      margin: 0 auto;
      padding: 0;
      width: 100%;
    }

    nav.globalMenuSp ul li {
      list-style-type: none;
      padding: 0;
      width: 100%;
      border-bottom: 1px solid #fff;
    }
    nav.globalMenuSp ul li:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
    nav.globalMenuSp ul li:hover{
      background :#ddd;
    }

    nav.globalMenuSp ul li a {
      display: block;
      color: white;
      padding: 1em 0;
      text-decoration :none;
        letter-spacing: 0.3rem;
    }

    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
      transform: translateX(0%);
        top: 80px;
    }
    
    
    
    
    
    
    
    
    
}

@media screen and (max-width: 1080px) {
    .form-button{
        padding-left:0px;
        text-align: center;
    }
 
    
}
@media screen and (min-width:811px){

}

@media screen and (max-width: 805px) {
    .flow-imgbox {
        width: 40%;
    }
    .flow-textbox {
        width: 50%;
    }

@media screen and (max-width: 784px) {
    .pc{
        display:none;
    }
    .pctab{
        display:block;
    }
    .tab{
        display:block;
    }
    .sp{
        display:none;
    }
    
    .top-banner p {
        font-size: 20px;
    }
    .content {
        margin-top:0px;
    }
    .content02 {
        top: 630px;
    }
    .change-theme {
        margin: 100px auto 80px;
    }
    .change-theme p {
        padding: 20px 0px;
    }
    .change p {
        font-size: 25px;
    }
    .change img {
        width: 80px;
    }
    #bluefont {
        font-size: 22px;
    }
    .goldarrow {
        width: 80px;
    }
    .service-container {
        margin-top: 1050px;
    }
    #pointfont {
        font-size: 16px;
    }
    #gre-title, #ora-title {
        font-size: 25px;
    }
    #ser-text {
        padding-top: 30px;
    }
    .service-container {
        height: 1300px;
    }
    #train-title {
        font-size: 25px;
    }
    .trainning-box01-01, .trainning-box02-02 {
        width: 95%;
    }
    .case-detail01, .case-detail02 {
        min-height: auto;
    }
    .prof-box01-01 {
        width: 100%;
        margin-bottom: 40px;
    }
    .prof-box02-00 {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 30px;
    }
    .connect-text p {
        font-size: 25px;
    }
    .form-button {
        padding-left:0px;
        text-align: center;
    }
    
    .service-point01, .service-point04, .service-point05 {
        width: 100%;
    }
    .service-point02, .service-point03, .service-point06 {
        width: 100%;
    }
    
    
}



@media screen and (max-width: 712px) {


}
@media screen and (max-width: 680px) {


} 
    
    
@media screen and (max-width: 630px) {
    .logomark {
        width: 400px;
    }
    .policy-box00 {
        width: 90%;
    }
    .footer-box01-00 {
        width: 50%;
    }
    .footer-box01 {
        height: 400px;
    }
    .footer-box02{
        width: 100%;
        margin-top: 50px;
    }
    
}

@media screen and (max-width: 580px) {


	/*pc版→SP版に表示入替*/
	.pc,#pc{
		display:none;
	}
    .pctab{
        display:none;
    }
	.tab{
	    display:none;
	}
	.sp,#sp{
		display:block;
	}
    
    
    
    
    .hero {
        padding-left: 10px;
    }
    
	.hero img {
        width: 300px;
    }
    .connect-text p {
        font-size: 20px;
    }
    .top-banner p {
        font-size: 16px;
        padding-top: 15px;
    }
    .frame {
        width: 100%;
        position: static;;
        height: 320px;
        padding-top: 30px;
        padding-left: 2.5%;
    }
    iframe {
        position: static;
        top: 0;
        left: 0;
        width: 95%;
        height: 320px;
    }
    
    nav.globalMenuSp {
        width: 100%;
    }
    
    .content02 {
        top: 700px;
    }
    .apealbanner{
            margin-top: 50px;
    }
    
    .change p {
        font-size: 20px;
        line-height: 2rem;
        padding-top: 20px;
    }
    .change-theme {
        width: 90%;
    }
    .change-theme p {
        font-size: 18px;

    }
    #check {
        width: 25px;
    }
    
    #bluefont {
        line-height: 2;
        margin-top: 0px;
        margin-left: 0px;
    }
    #pinkborder {
        padding-left: 30px;
    }
    .service-container {
        margin-top: 1200px;
    }
    
    .service-box01-01, .service-box04-01, .service-box05-01 {
        height: 150px;
    }
    
    .service-box01, .service-box02, .service-box03, .service-box04, .service-box05, .service-box06 {
        width: 95%;
        height: 175px;
    }
    .service-box02-01, .service-box03-01, .service-box06-01 {
        height: 150px;
    }
    .service-point01, .service-point03, .service-point05 {
        background: linear-gradient(to bottom,#FFB399,#FF5015);
    }
    .service-point02, .service-point04, .service-point06 {
        background: linear-gradient(to bottom,#B3FF99,#59B200);
    }
    .service-box01-01, .service-box03-01, .service-box05-01 {
        border: 7px solid #FF5015;
    }
    .service-box02-01, .service-box04-01, .service-box06-01 {
        border: 7px solid #59B200;
    }
    .trainning-container {
        margin-top: 450px;
    }
    .trainning-box01-02, .trainning-box02-01 {
        width: 100%;
    }
    #train-title {
        font-size: 18px;
    }
    #gre-title, #ora-title {
        font-size: 22px;
    }
    .prof-box02-00 {
        width: 90%;
    }
    .theme-title {
        padding: 60px 0;
        width:300px;
    }
    .theme-title02 {
        padding: 0;
        width: 350px;
    }
    .trainning-box01, .trainning-box02 {
        padding: 50px 0;
    }
    .theme-title03 {
        padding: 50px 0 30px;
        width: 320px;
    }

    .theme-title04 {
        padding: 50px 0 30px;
        width: 280px;
    }
    .cost-box01 {
        width: 70%;
    }
    .theme-title05 {
        padding: 50px 0 30px;
        width: 280px;
    }
    .prof-box01 {
        flex-direction: column-reverse;
    }
    .prof-box01-01 {
        margin-bottom:30px;
        margin-top: 40px;
    }
    .prof-box01-02{
        width: 60%;
        margin: 0 auto;
    }
    .prof-box01-02 img{
        width:100%;
    }
    .profile-container {
        padding-bottom: 50px;
    }
    .theme-title06 {
        padding: 50px 0 30px;
        width:230px;
    }
    .theme-title07 {
        padding: 70px 0 30px;
        width: 300px;
    }
    .theme-title08 {
        padding: 50px 0 30px;
        width:300px;
    }
    .theme-title09{
        width: 300px;
    }
    .flow-box00 {
        margin: 30px auto;
    }
    .flow-imgbox {
        width: 30%;
    }
    #flow-img01{
        width:50%;
    }
    #flow-img02{
        width:100%;
    }
    .flow-textbox {
        width: 60%;
    }

    #flow-detail {
        height: 70px;
    }
    
    .theme-title p,.theme-title02 p,.theme-title03 p,.theme-title04 p,.theme-title05 p,.theme-title06 p,.theme-title07 p,.theme-title08 p,.theme-title09 p{
        font-size:25px;
    }
    .qaimg {
        width: 10%;
    }
    .qaimg img{
        width:100%;
    }
    
    .connect-text {
        margin: 50px auto;
    }
    .connect-text p {
        font-size: 18px;
        padding: 30px 0px;
    }
    .contact-attention {
        margin: 0px auto 30px;
    }
    .contact-attention p {
        line-height: 1.5;
    }
    .contact-form {
        width: 90%;
    }
    .form-box01, .form-box02, .form-box03, .form-box04, .form-box05, .form-box06, .form-nbox07, .form-box08 {
        margin-top: 20px;
        margin-bottom: 0px;
    }
    #company-name, #name, #name-kana, #mail {
        margin-left: 0px;
    }
    label{
        width:5%;
    }
    #prefectures {
        margin-left: 0px;
    }
    #director {
        margin-left: 54px;
    }
    #tel {
        margin-bottom: 20px;
        margin-left:0px;
    }
    #detail-text {
        width: 48px;
    }
    .border-gray {
        font-size: 14px;
    }
    .form-button {
        margin-top: 30px;
    }
    #submitcheck {
        padding: 15px 50px;
    }
    .contact-container {
        height: 1150px;
    }
    .footer-box01-00 {
        width: 60%;
    }

    .site-footer {
        height: 0px;
    }
    .copyright {
        font-size: 12px;
        padding-top: 30px;
    }
    .footer-box02 {
        height: 80px;
    }
    .footer-box01-01 {
        width: 90%;
        margin-top: 30px;
    }
    .service-container {
        height: 1700px;
    }
    .trainning-container {
        margin-top: 100px;
    }
    .slick-slide {
        margin-left: 0px;
    }
    .ora-case,.gre-case{
        font-size:14px;
    }
    /*----------------スマホ用下部固定メニュー--------*/
    /*メニューをページ下部に固定*/
#sp-fixed-menu{
   display:block;
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding: 20px 0px;
}
.site-header{
    position: fixed;
    height: 80px;
    z-index:5;
}  
   .content {
    margin-top: 100px;
    } 
    
    
}



@media screen and (max-width: 411px) {
    
    .service-container {
    margin-top: 980px;
    }
        .service-lineup {
        margin: 0 auto;
    }
    .service-box01-01, .service-box04-01, .service-box05-01 {
        padding: 40px 15px 0 10px;
    }
    .service-box02-01, .service-box03-01, .service-box06-01 {
        padding: 40px 15px 0 10px;
    }
    .prof-box01-02 p {
        font-size: 18px;
    }
    
/*ヘッダー*/
	.hero img {
        width: 250px;
    }
    .content02 {
        top: 580px;
    }
    .change-theme {
        margin: 50px auto 80px;
    }
    


    
    
    
/*フッター*/


    
    #bluefont {
        font-size: 20px;
    }
    #company-name, #name, #name-kana, #mail {
        width: 70%;
    }
    #prefectures {
        width: 77%;
    }
    
    #director {
        width: 70%;
    }
    #tel {
        width: 70%;
    }
    #contact-detail {
        width: 70%;
    }
    
    .footer-box01-00 {
        width: 80%;
    }
    .footer-box01 {
        height: 500px;
    }
    
    .footer-box01-01 p {
        font-size:14px;
    }

}

/*@media screen and (max-width: 352px) {
}
*/