/* ------------------------------------------------------------------------------
 Template Name: Floix
 Author: Designstub
 Author URI: http://www.designstub.com
------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open%20Sans:300,400,500,700');

/* ------------------------------------------------------------------------------
  Typography
-------------------------------------------------------------------------------*/
html{ font-size: 62.5%; }

body { margin: 0; padding: 0; text-size-adjust: 100%;/*androit-TAB用*/ }

*{
 font-style: normal;
 font-family: 'Noto Sans JP', sans-serif;
 color: #000;
 font-size: 1.4rem;
 font-weight: 500;
 box-sizing: border-box;
}

/* ------------------------------------------------------------------------------
  res
-------------------------------------------------------------------------------*/
/*PCと768タブレットは一緒*/
/*768以下全部*//*768をspに含める*/
@media screen and (max-width: 767px) {
.pc-on { display: none  !important;}
.sp-on { display: inline-block !important; }
}

/*769以上全部*/
@media screen and (min-width: 768px) {
.pc-on { display: inline-block !important; }
.sp-on { display: none !important;}
}



/* ------------------------------------------------------------------------------
  General Style
-------------------------------------------------------------------------------*/
h1,h2,h3,ul, ol,p { margin: 0; padding: 0; }
ul li { list-style: none; }

/*
a[href^="tel:"] { cursor: default; }
h5 { text-transform: uppercase;}
*/

a { text-decoration: none; }
p { font-size: 1.4rem; }

.attention { 
 display: inline-block;
 margin: 0;
 padding: 0;
    background: -webkit-linear-gradient(transparent 60%, #FFFF99 60%);
    background: -o-linear-gradient(transparent 60%, #FFFF99 60%);
    background: linear-gradient(transparent 60%, #FFFF99 60%);
}

.min{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}


/* ==========================================================================
  Header
========================================================================== */
#header {
 width: auto;
 margin: 0 auto 0;
 /*
 min-height: 628px;
 min-width: 1230px;
 background: url('../img/main_bk.png') no-repeat center top;
 background-size: cover;
 */
 text-align: center;
}

img { max-width: 100%; }

#header .main-img { position: relative; }

#header .logo {
 display: inline-block;
 position: absolute;
 height:11%;
 width:11%;
 margin: 4.5% 0 0 5%;
 padding:0;
 top:0;
 left:0;
 z-index: 9999;
 text-indent: -9999px;
}

#header .logo a {
 display: block;
 height:100%;
 /* 位置確認用
 background:yellow;
 border:1px solid #000;
 opacity: 0.5;
 */
}

#header .logo a:hover {
 background: none;
 border:none;
}

/* ==========================================================================
  位置確認用
========================================================================== */

/*
body { background: url('../img/all.png') no-repeat center top;}

@media screen and (min-width: 1250px) {
body { background-size: cover; }
}
.out .inn * { color: blue; }

.box03 .out .inn:nth-child(2) { background :blue; opacity: 0.8; }
.box03 .out .inn:nth-child(3) { background :green; opacity: 0.8; }
.box03 .out .inn:nth-child(4) { background :red; opacity: 0.8; }
.box03 .out .inn:nth-child(5) { background :yellow; opacity: 0.8; }
.box03 .out .inn * { color: #fff; }

#header img { max-width: 1230px; }
*/



/* ==========================================================================
  body
========================================================================== */

/***********************************************
  共通/基本設定
***********************************************/

.bkk{
 margin: 0 0 0 0;
 padding: 0;
}

/*コンテンツの横幅*/
.bar1,
.bar2,
.sdgs,
#GOALS,
.footer #site-top { width: 90%; margin: 0 auto; }


/*パーツの上下余白位置*/
.bar1 { display: block; margin-bottom: 72px; padding: 0; }
.bar2 { display: block; margin-bottom: 58px; padding: 0; }

.sdgs { padding: 0 0 100px; }

img.icon { height: 15vw; max-height: 64px; }

/*文字インデント*/
.box01 .hh2 h2 { text-indent: -0.5em; }
.box01 .inn h3 { text-indent: -0.5em; }
 
/*文字サイズ*/
.hh2 h2  { font-size: 18px; line-height: 1.5;   letter-spacing: 0.2rem; font-weight: 700; }
.inn h3  { font-size: 15px; line-height: 1.5; letter-spacing: 0.3rem; font-weight: 700; }
.hh2 p   { font-size: 14px;  line-height: 1.8; letter-spacing: 0.1rem;  font-weight: 500; }
     p,
.inn p,
#GOALS p { font-size: 14px;  line-height: 1.8; letter-spacing: 0.2rem;  font-weight: 500; }


#GOALS p { letter-spacing: 0.1rem; }


/*文字下の余白*/
.hh2    { padding: 0 0 52px 0; }
.hh2 h2 { padding: 0 0 47px 0; }
.hh2 p  { padding: 0 0 28px 0 ; }

.inn h3{ padding: 28px 0 20px 0; }
.inn p  { padding: 0 0 36px 0; }



/* GOALS
***********************************************/
#GOALS img { margin: 0 auto 56px; width: 100%; }


/* totop
***********************************************/
#page-top {
 position: fixed;
 bottom: 48px;
 right: 10px;
 z-index: 999;
}

#page-top a {
 display: block;
 width: 100px;
 height: 94px;
 padding-top: 70px;
 text-align: center;
 text-decoration: none;
 background: url('../img/totop.png') no-repeat center top;
 opacity: 0.8;
}

#page-top a:hover {
 opacity: 0.7;
}

/* Footer
***********************************************/
.footer {
 margin: 112px 0 0 0;
 padding:0;
}

.footer #site-top { margin: 0 auto 56px; }

.footer a:before {
    vertical-align: middle;
    margin: 0 13px 0px 0;
    width: 13px;
    height: 23px;
    display: inline-block;
    background: url(../img/icon-arrow.png) no-repeat left center;
    background-size: contain;
    content: " ";
}

.footer .copy {
 display: block;
 margin: 0;
 padding:10px 0;
 border-top:1px solid rgba( 0,0,0,0.2 );
 font-size: 1.2rem;
 text-align: center;
 letter-spacing: normal;
}








/*PC設定以下*/

/***********************************************
768以上 基本設定
***********************************************/
@media screen and (min-width: 768px) {

img { max-width: 100%; }

#header img { width: 100%; }
#header .logo {
 height:11%;
 width:10%;
 margin: 2.8% 0 0 5%;
}

#GOALS     { width: 48%; min-width: 600px; max-width: 680px; margin: 0 auto; }

/*文字サイズ*/
.hh2 h2  { font-size: 2.6rem; line-height: 1;   letter-spacing: 0.3rem; font-weight: 500; }
.inn h3  { font-size: 1.8rem; line-height: 1.8; letter-spacing: 0.2rem; font-weight: 700; }
.hh2 p   { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0.2rem; font-weight: 500; }
     p,
.inn p,
#GOALS p { font-size: 1.4rem; line-height: 1.6; letter-spacing: 0.2rem; font-weight: 500; }

#GOALS p { letter-spacing: 0.1rem; }

/*文字下の余白*/
.hh2    { padding: 0 0 60px 0; }
.hh2 h2 { padding: 0 0 46px 0; }
.hh2 p  { padding: 0 0 ; }
.inn h3 { padding: 3px 0 10px 0; }
.box02 .inn h3 { padding: 8px 0 20px 0; }
.box04 .inn h3 { padding: 8px 0 27px 0; }
.inn p  { padding: 1% 0 0 0; }

/*文字インデント*/
.box01 .hh2 h2 { text-indent: -1.5rem; }
.box01 .inn h3 { text-indent: -1.1rem; }

/*アイコン*/
img.icon { height: 64px; }

/* innの幅・文字位置*/
.out  { position: relative;}
.out .inn {
 position: absolute;
 z-index: 99;
}

.out img { width: 100%; }

/*
.out .inn:nth-child(2) { opacity: 0.8; background: gray ; }
.out .inn:nth-child(3) { opacity: 0.8; background: green; }
.out .inn:nth-child(2) { left: 0; top:0; }
.out .inn:nth-child(3) { left: 0; top:0;}

*/


/*箱ごとの幅と位置*/
.box04 .hh2 { min-height: 120px; }/*アイコン位置用*/
.box04 .icon{ top:31%; }

.box01 .out .inn { width: 46%;}
.box02 .out .inn { width: 92%;}
.box03 .out .inn { width: 51%;}
.box04 .out .inn { width: 92%;}
.box05 .out .inn { width: 47%;}
.box06 .out .inn { width: 43%;}


.box01 .out .inn:nth-child(2) { left: 52%; top:24%; }
.box01 .out .inn:nth-child(3) { left: 0; top:68%;}

.box02 .out .inn:nth-child(2) { left: 5%; top:59%; }

.box03 .out .inn:nth-child(2) { left: 0; top:7%;}
.box03 .out .inn:nth-child(3) { left: 0; top:31%;}
.box03 .out .inn:nth-child(4) { left: 0; top:52.5%;}
.box03 .out .inn:nth-child(5) { left: 44%; top:81%; }

.box04 .out .inn:nth-child(2) { left: 5%; top: 62%; }

.box05 .out .inn:nth-child(2) { left: 52.5%; top:24.5%; }
.box05 .out .inn:nth-child(3) { left: 0; top:69.5%;}

.box06 .out .inn:nth-child(2) { left: 4%; top:21.5%; }
.box06 .out .inn:nth-child(3) { left: 50.5%; bottom:1%;}

#page-top {
 position: fixed;
 bottom: 48px;
 right: 80px;
 z-index: 999;
}

}




/***********************************************
768-870 固定  (ipad 縦 対応/アイコンかぶり防止)
***********************************************/
@media screen and (min-width:768px) and ( max-width:880px) {
/*
.box01 .hh2,
.box02 .hh2,
.box05 .hh2 { padding-right: 230px; }
.box04 .hh2 { padding-right: 84px; }
.box06 .hh2 { padding-right: 156px; }

.box01 .hh2 * br,
.box02 .hh2 * br,
.box05 .hh2 * br,
.box06 .hh2 * br { display: none; }
*/

.hh2 { padding: 0 0 32px 0; }
.icon { margin: 28px 0 0 0; }
}



/***********************************************
881px以上  (次の指定まで)
************************************************/
@media screen and (min-width: 881px) {
/*コンテンツの横幅*/
.bar1,
.bar2,
.sdgs,
.footer #site-top { width: 830px; }

/*アイコン位置 PC版*/
.hh2    { position: relative; }
.icon {
 position: absolute;
 right: 0;
 top:43%;
 z-index: 99; 
 }
}


/***********************************************
1200px以上
************************************************/

@media screen and (min-width: 1200px) {

/*コンテンツの横幅*/
.bar1,
.bar2,
.sdgs,
.footer #site-top { width:66%; min-width: 830px; }


/*パーツの位置*/
.bar1 { display: block; width:66%; margin: 0 auto 115px; padding: 0; }
.bar2 { display: block; width:66%; margin: 0 auto 116px; padding: 0; }

/*文字サイズ*/
.hh2 h2 { font-size:2vw; }
.inn h3 { font-size:1.4vw; line-height: 1.5; }
.hh2 p  { font-size:1.2vw; line-height: 1.8; }
     p,
.hh2 p,
.inn p,
#GOALS p { font-size:1.1vw; line-height: 1.8; }

/*h3余白*/
.box02 .inn h3 { padding: 0 0 10px 0; }
.box04 .inn h3 { padding: 0 0 18px 0; }


/*箱ごとの幅と位置*/
.box04 .hh2 { min-height: 120px; }/*縦幅確保*/
.box04 .icon{ top:24%; }/*アイコン位置*/

.box01 .out .inn { width: 46%;}
.box05 .out .inn { width: 46%;}
.box06 .out .inn { width: 46%;}

.box01 .out .inn:nth-child(2) { top:24%; }
.box01 .out .inn:nth-child(3) { top:69%;}
.box02 .out .inn:nth-child(2) { left: 5%; bottom: 0; top:auto; }
.box03 .out .inn:nth-child(5) { top:83%;}
.box04 .out .inn:nth-child(2) { left: 5%; bottom: 1%; top:auto; }
.box06 .out .inn:nth-child(2) { left: 2%; }

}



/***********************************************
1500px以上
************************************************/
@media screen and (min-width: 1500px) {

/*コンテンツの幅*/
.bar1,
.bar2,
.sdgs,
.footer #site-top { max-width: 1000px; }

/*文字サイズ*/
.hh2 h2 { font-size: 2.6rem; }
.inn h3 { font-size:1.9rem; }
.hh2 p  { font-size:1.65rem; }
     p,
.hh2 p,
.inn p,
#GOALS p { font-size:1.6rem; }

}



/* ------------------------------------------------------------------------------
  レスポンシブ部分
-------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 1200px) {/*bootstrap区切り*/
}

@media screen and (max-width: 992px) {/*bootstrap区切り*/
}

@media screen and (min-width:768px) and ( max-width:992px) {/*タブレット以下は画像縦並び*/
}

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

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

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

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