@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み 
→ 2023/02/21 DLしてCSSフォルダに保管した。間違えて削除した時はDLして保存すること。
リセットCSSとは、
ブラウザがWebページを表示する際に使うスタイルを打ち消し、
ブラウザによる見え方の差をなくしてくれるのがリセットCSSです。
---------------------------------------------------------------------------*/
@import url("css/sanitize.css");
<!--@import url("https://unpkg.com/sanitize.css");-->



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Kaushan+Script&family=Qwitcher+Grypen:wght@700&display=swap');

/*Google Font 'Yuji Syuku' の読み込み(「人と自然を創造する-誰もが健康であるために」などに適用）
『趣のある和文向きの筆書体、アルファベット（文字間は少し広め）でも良い感じだと思う』
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');

/*Google Font 'Noto Serif JP' （Medium 500 ）の読み込み(本文などに適用）
明朝体風のフォント
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500&display=swap');

/*Google Font 'Noto Sans Japanese' （Bold 700）の読み込み(本文などに適用）
ゴシック体風のフォント
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

/*Google Font 'M PLUS Rounded 1c'
丸ゴシック系のフォント-------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");





/*全体の設定
---------------------------------------------------------------------------*/

	
/*--SDGsホイールを回転－背景画像が読み込まれるまでの回転アニメーション--*/
@keyframes sdgsRotation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}

#loading {
	width: 100vw;
	height: 100vh;

	background-color: #f6f7f8;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;

	top: 0;
	left: 0;
	z-index: 100;
}
  
.loading-icon {
	width: 55px;
	height: 55px;
	background-image: url('../images/sus/wheel.png');
	background-size: contain;
	background-repeat: no-repeat;
	animation: sdgsRotation 2s linear infinite;
}
/*--ここまで。　SDGsホイールを回転－背景画像が読み込まれるまでの回転アニメーション--*/  

  
*{
	box-sizing: border-box;/*--要素の幅と高さに「paddingとborderを含めるかどうか」border-boxにすると、含めるという指定--*/
}


html, body {
	margin: 0;padding: 0;
	font-size: 0.9vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	width: 100%;
	scroll-behavior: smooth;	/*--スクロール動作を制御するためのCSSプロパティです。スムーズなスクロールを有効にする--*/
}

section{z-index: 1;}	/*--文字を入れる要素--*/

p, h2 {
	font-family: 'Noto Serif JP', serif;
	opacity: 0;		/*--最初は見えなくしておく--*/
	/*background-color: rgba(187, 56, 56, 0.5);*/
	/*padding: 4vh 4vh 4vh 4vh;*/
	font-size: 1.1vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	
	text-shadow:2px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF,  0-1px 0 #FFF,
	-1px 0 0 #FFF, 1px 0 0 #FFF;
}

p{line-height: calc(1.1vw *2);}

body {
	/*overflow-x: hidden;	/*-- 横方向のスクロールバーを非表示にする --*/
						/*--iOSでは効かない。。。--*/
	-webkit-overflow-scrolling: touch; /* iOS Safariでスクロールを滑らかに */


	position: relative;	/*--これを追記するとiOSでoverflow-x: hidden;が効いたという記載があるが、ダメだった。。。--*/
	
	
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;


	/*画面に映し出されるときにフェードイン*/
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

.larger{
	font-size: 1.3vw;
	line-height: calc(1.1vw *2.1);
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}


/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}



/*============================
CSS　nav(スマートフォン用ナビメニュー
=============================*/
nav {
	display: block;
	position: fixed;
	top: 0;
	left: -330px;
	bottom: 0;
	width: 330px;
	background-color: rgba(255, 255, 255, 0.8); 
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 100;
	opacity: 0;
}
nav li img{
	width: 5vh;	/* 画像の大きさ */
	float: left; /* 画像とテキストを横並びに */
	margin-right: 10px; /* 画像とテキストの間隔を調整する */
	overflow-wrap: break-word;
}
.open nav {
	left: 0;
	opacity: 1;
}
nav .inner {
	padding: 5px;
}
nav .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav .inner ul li {
	position: relative;
	min-height: 6.6vh;
	margin: 0;
	border-bottom: 1px solid #333;
}
nav .inner ul li a {
	display: block;
	min-height: 6.4vh;
	color: #333;
	font-size: 14px;
	padding: 0.5em;
	text-decoration: none;
	transition-duration: 0.2s;
}
nav .inner ul li a:hover {
	background: #e4e4e4;
}
@media screen and (max-width: 767px) {
nav {
	left: -220px;
	width: 220px;
}
}
/*============
.toggle_btn
=============*/
.toggle_btn {
	display: block;
	position: fixed;
	top: 30px;
	right: 30px;
	width: 30px;
	height: 30px;
	transition: all .5s;
	cursor: pointer;
	z-index: 100;
}
.toggle_btn span {
	display: block;
	position: absolute;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: #333;
	border-radius: 4px;
	transition: all .5s;
}
.toggle_btn span:nth-child(1) {
	top: 4px;
}
.toggle_btn span:nth-child(2) {
	top: 14px;
}
.toggle_btn span:nth-child(3) {
	bottom: 4px;
}
.open .toggle_btn span {
	background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
	-webkit-transform: translateY(10px) rotate(-315deg);
	transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
	opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
	-webkit-transform: translateY(-10px) rotate(315deg);
	transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
	display: none;
	transition: all .5s;
}
.open #mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .8;
	z-index: 90;
	cursor: pointer;
}
/*-------------------------------*/

/*--スマホ用のナビゲーションを非表示--*/
#navArea {
	display: none;
}


/*--ページ左上が基点--*/
header{
	position: relative;
	z-index: 99;
}


header .logo{					/*--ページ上にある社名--*/
	display: block;				/*--ブロック要素--*/
	width: calc(100vw/5);		/*--表示幅の指定--*/
	position: absolute;			/*--画面左上を基点になる--*/
	top: 0.8vw;					/*--画面上からの距離--*/
	right: 0.7vw;					/*--画面右からの距離--*/
	position: fixed;			/*--要素を固定--*/
	/*z-index: -1;				/*--重なりの順序を指定--*/
}




/*--最初の背景画像の見え隠れに関するパララックス　ここから
-----------------------------------------------------------------------------*/

/*--
表紙（管理棟を覆う画面）に関する設定
１．亀岡市と工場の位置関係を示す航空写真
２．航空写真の上に近畿地方の地図（透過png）を重ねる。
３．亀岡工場と本社の位置に点を表示させて、点滅
４．地図と点はアニメーションの設定で表示遅延させる。（先に航空写真が出た後に地図と点を表示）
--*/  
#aaa {/*--表紙画像は固定でないためluxyが適用可能--*/
	height: 100vh;
	width: 100%;
	background-image: url(../images/sus/bg_main_first.jpg); /*１番目の背景画像(固定ではない)*/
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: cover;
	text-align: center;
	z-index: 100;
}





/*--表紙のフォント、スタイル--*/
.top{
	position: relative;
	width: 100%;
	height: 100%;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	text-shadow: 
	  -1px -1px 0 #FFF,
	  1px -1px 0 #FFF,
	  -1px 1px 0 #FFF,
	  1px 1px 0 #FFF; /* テキストの周囲に影のような縁取りを追加 */
}

.overlay-warpper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	z-index: 2;
	opacity: 0;	/*--opacity: 0; として地図の初期状態を透明に設定--*/
	animation: showOverlay 3.5s linear 2s forwards;
}

@keyframes showOverlay { /*--showOverlayアニメーションは、地図画像（透過png）の表示遅延を制御--*/
	/*--opacity: 0; として点の初期状態を透明に設定し、アニメーションの実行時間を指定することで表示遅延効果を実現--*/
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	  transform: translateY(-1vw);
	}
}
 
/*--SDGsパートナーロゴ---*/
.sdgs-partner img {
	width: 15vw;
	transition: box-shadow 0.5s
}

.sdgs-partner img:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

/*--SDGsロゴを格納する要素---*/
.overlay-left {
	position: relative;
	width: 20vw;
    position: relative;
}


/*--亀岡市の地図---*/
.overlay-right {
	width: 20vw;
	height: 20vw;
    position: relative;
}

/*--hoverでシャドウを付けると四角い枠が判るので、
２枚の画像を設定してhoverで入れ替える
画像はポジションプロパティを同じにして大きさをも同じにしておく--*/
.kameoka-city img {
	width: 20vw;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s;
}

.kameoka-city img:first-child {
    opacity: 1;
}

.kameoka-city img:last-child {
    opacity: 0;
}

.kameoka-city:hover img:first-child {
    opacity: 0;
}

.kameoka-city:hover img:last-child {
    opacity: 1;
}


/*--地点目印の大きさ、色　小さい画面では大きを調整--*/
.point {
	width: 10px;
	height: 10px;
	border-radius: 50%;	/*--丸にする--*/
	background-color: #bc0000;
	opacity: 0;	/*opacity: 0; として点の初期状態を透明に設定*/
	animation: showPoint 2s linear 2s forwards, blink 3s ease-in-out infinite;
	/*--showPoint 2s linear 2s forwards は、2秒間で点を表示させ、最終状態を保持--*/
	/*--blink 3s ease-in-out infinite は、3秒間隔で点滅するアニメーション--*/
	z-index: 3;
}
   
@keyframes showPoint {	/*--showPointアニメーションは、点の表示遅延を制御--*/
	/*--opacity: 0; として点の初期状態を透明に設定し、アニメーションの実行時間を指定することで表示遅延効果を実現--*/
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
}
  
@keyframes blink {	/*--blinkアニメーションは、点の点滅表示（infinite）を制御--*/
	0%,
	100% {
	  opacity: 1;
	}
	50% {
	  opacity: 0;
	}
}

/*--亀岡市の地図が入る要素（これを親要素として点と文字を配置）--*/
.overlay-right{
	position: relative;
	/*border: solid 1px #5216b3;*/
}

/*--地図上の点（亀岡工場の場所）--*/
.point-1{
	position: absolute;
	top: 33%; 
	left: 45%;
}

/*--地図上の点（本社の場所）--*/
.point-2{
	position: absolute;
	top: 48%; 
	left: 44.5%;
}


/*--亀岡工場（地図上の文字）--*/
.map-point-1{
	position: absolute;
	top: 26.5%;
	left: 0%;
	font-size: 1vw;
	/*--.color: #cb0000;--*/
}

.map-point-1::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0%;
	height: 1.8px;
	background-color: #bc0000;
	animation: underline_anim_1 2s linear forwards;
	opacity: 0;
	
	animation-delay: 3s; /*遅延 */
}

.map-point-1.active::before {
	opacity: 1;
}

@keyframes underline_anim_1 {
	0% {
		width: 0%;
	}
	100% {
		width: 230%;
	}
}

/*--本社（地図上の文字）--*/
.map-point-2{
	position: absolute;
	top: 41.8%;
	left: 0;
	font-size: 1vw;
	/*--color: #cb0000;--*/
}

.map-point-2::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0%;
	height: 1.8px;
	background-color: #bc0000;
	animation: underline_anim_2 2s linear forwards;
	opacity: 0;
	
	animation-delay: 3s; /*--遅延--*/
}

.map-point-2.active::before {
	opacity: 1;
}

@keyframes underline_anim_2 {
	0% {
		width: 0%;
	}
	100% {
		width: 130%;
	}
}


/*--表紙画像の文字（京都府亀岡市、小城製薬株式会社亀岡工場--*/
.kyo-kame{
	position: absolute;
	top: 30vh;
	left: 44vw;
	font-size: 2vw;
	opacity: 0;	/*--opacity: 0; として地図の初期状態を透明に設定--*/
	animation: showText 1s linear 2s forwards;
}

.kame {
    position: absolute;
    bottom: 2vh;
    left: 37vw;
	color: #00245d;
    font-size: 2vw;
	opacity: 0;	/*--opacity: 0; として地図の初期状態を透明に設定--*/
	animation: showText 1s ease 2s forwards;
}

@keyframes showText { /*--showOverlayアニメーションは、地図画像（透過png）の表示遅延を制御--*/
	/*--opacity: 0; として点の初期状態を透明に設定し、アニメーションの実行時間を指定することで表示遅延効果を実現--*/
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}


/*--縦方向に伸びる誘導線－後続するコンテンツへの誘導--*/
.scrollDown {
	display: block;
	position: absolute;
	top: 37vh;
	left: 50vw;
	width: 0.1vw;
	height: 15vh;
	background-image: linear-gradient(
    	-180deg,
    	transparent,
   		rgb(238, 238, 238) 50%,
    	transparent 50%,
    	transparent
  	);
  	background-repeat: no-repeat;
  	background-size: 100% 200%;
  	animation-name: scroll-down;
  	animation-duration: 5s;
  	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /*--easeOutQuintのイージング--*/
  	animation-delay: 0.7s;
  	animation-iteration-count: infinite;
  	animation-fill-mode: backwards;
}

@keyframes scroll-down {
  0% {
    background-position: 0 100%;
  }

  50% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -100%;
  }
}

/*========= スクロールダウン「マウスポインタ―」設置のためのCSS ===============*/
/*スクロールダウン全体の場所*/
.scrolldown-mouse {
	/*--描画位置--*/
	display: block;
	position: absolute;

	top: 20vh;
	left: 49.9155vw;
	transform: translate(-50%, -50%);

	/*--マウスの動き1.6秒かけて動く永遠にループ--*/
	animation: mousemove 1.6s ease-in-out infinite;
}
  
/*--下からの距離が変化して上から下に動く--*/
@keyframes mousemove {
	0% {
	  bottom: 10px;
	}
	50% {
	  bottom: 5px;
	}
	100% {
	  bottom: 10px;
	}
}
  
/*--Scrollテキストの描写--*/
.scrolldown-mouse span {
	/*--描画位置--*/
	position: absolute;
	left: -15px;
	bottom: 45px;
	/*--テキストの形状--*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;

	text-shadow:none; /*--ここでは縁取りを消す。--*/
}
  
/*--マウスの中の線描写--*/
.scrolldown-mouse span::after {
	content: "";
	/*--描画位置--*/
	position: absolute;
	top: 10px;
	left: 17px;
	/*--線の形状--*/
	width: 1px;
	height: 15px;
	background: #eee;
	/*--線の動き1.4秒かけて動く。永遠にループ--*/
	animation: mousepathmove 1.4s linear infinite;
	opacity: 0;
}
  
/*--上からの距離・不透明度・高さが変化して上から下に流れる--*/
@keyframes mousepathmove {
	0% {
	  height: 0;
	  top: 10px;
	  opacity: 0;
	}
	50% {
	  height: 15px;
	  opacity: 1;
	}
	100% {
	  height: 0;
	  top: 30px;
	  opacity: 0;
	}
}
  
/*--マウスの描写--*/
.scrolldown-mouse::before {
	content: "";
	/*--描画位置--*/
	position: absolute;
	bottom: 0;
	left: -10px;
	/*--マウスの形状--*/
	width: 25px;
	height: 37px;
	border-radius: 10px;
	border: 1px solid #eee;
}
  
/*--マウスの中の丸の描写--*/
.scrolldown-mouse::after {
	content: "";
	/*--描画位置--*/
	position: absolute;
	bottom: 26px;
	left: 0;
	/*--丸の形状--*/
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: 1px solid #eee;
}
/*--ここまで。　表紙画像に関する設定--*/  


/*--使っていない--*/
#bbb {
	height: 100vh;
	width: 100%;
	background-image: url(); /**/
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: cover;
	z-index: 100;
	background-color: rgb(253, 253, 245,0);
	border: solid 1px #666;
	
}
/*--使っていない--*/
#ccc {
	height: 100vh;
	background-color: rgb(253, 253, 245);
}

.gutter {
	height: 100vh;
	/*border: solid 1px #4bc97b;*/
}

/*--back-img-cは未使用--*/
.back-img-b,
.back-img-c {
	display: block;
	position: sticky;
	top: 0;
	z-index: -1;
	height: 0;
	max-height: 0;
	overflow: visible;
}

.back-img-b::after,
.back-img-c::after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: cover;
}

/*２番目の背景画像(固定)*/
.back-img-b::after {
	background-image: url(../images/sus/bg_main.jpg);
	width: 100%;
}

/*３番目の背景画像(固定) 使用せず*/
.back-img-c::after {
	background-image: url(../images/sus/bg_main_first.jpg);
	width: 100%;
}
/*--ここまで-------------------------------------------------------------------------------*/



/*
h1{
	font-size: inherit;
	margin: 0;
}
*/

#top-title{						/*--[事業の発展と持続可能な社会の両立]を入れるボックス要素--*/
	display: block;				/*--ブロック要素--*/
	position: absolute;			/*--画面左上が基点になる--*/
	width: 100vw;
	top: 40%;
	left: 0; 
	text-align: center;
	position: fixed;			/*--要素を固定--*/
	/*border: solid 1px #666;*/
	z-index: -1;
}

.top-text-hide {display: none;}	/*--[事業の発展と持続可能な社会の両立]最初は透明で見えなくする--*/

.top-text-show {
	position: static;
	opacity: 1;
}	/*--[事業の発展と持続可能な社会の両立]再表示--*/

.top-text{			/*--[事業の発展と持続可能な社会の両立]文字の書式--*/
	/* font-family: 'Yuji Syuku', serif; fontをどうしようか？　*/	
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.8vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	font-weight: 600;
	z-index: 20;

	/*--以降、文字のスタイルを定義--*/
    color: #ffffff;
    font-weight: bold;

	opacity: 0;
	transition: opacity 3.5s, font-size 0.5s;

    text-shadow:
        1px 1px 0px #000, -1px -1px 0px #000,
        -1px 1px 0px #000,  1px -1px 0px #000,
        1px 0px 0px #000, -1px  0px 0px #000,
        0px 1px 0px #000,  0px -1px 0px #000,
		2px 2px 3px #646669;
}




/*--SDGsアイコンを入れる要素--*/
.bg-contents ul {
	padding: 0;
	margin: 0;
}
.bg-contents li {
	list-style:none;
}

ul.icon-container {
	z-index: 50;
}

.icon-container {
	display: flex;		/*--中の要素(アイコン画像)を横並びに--*/
	flex-wrap: wrap;	/*--一列で収まらない場合は--*/
	justify-content: center;	/*--横方向の配置方法--*/
	max-width: 100vw;
	align-items: flex-start; /*-iPad mini など、特定のデバイスでアイコンが縦長になったので挿入--*/
	overflow: hidden;
	
	background-color: rgba(255, 255, 255,1);	/*1>透明*/	
	/*border: solid 0.5px #d64646;*/
}
 
/*--SDGsアイコンの大きさを指定--*/
.icon-container img {
	width: 8vh;
	padding: 0.2vw;
}

/*--SDGsアイコン固定時のクラス--*/
.icon-fixed {
	position: fixed; /*--要素の位置を固定する--*/
	top: 0.80vw;
	left: 50%;
	background-color: rgba(255, 255, 255,0);	/*---固定時は背景を透明に--*/	
}

/*--スマホ:SDGsアイコン固定時のクラス--*/
.icon-fixed-sp {
	position: fixed; /*--要素の位置を固定する--*/
	width: 100vw;
	top: 24vw;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	background-color: rgba(255, 255, 255,0)	/*---固定時は背景を透明に--*/
}

/*--冒頭の内容が格納された親要素--*/
/*--.blessing, .ambi, .kameoka, .plant--*/
div .contents {
	position: relative;
	display: block;
	width: 100%;
	overflow-x: hidden;
	/*border: solid #cf1b60 2px;*/
	/*background-color: rgba(255, 255, 255,0.1);*/
	background-image: linear-gradient(to bottom, 
	rgba(255,255,255,0) 0%,
	rgb(161, 199, 248) 2%, 
	rgb(183, 206, 235) 10%,
	rgb(230, 244, 255,1) 30%, 
	rgba(255, 255, 255,1) 100%);
	/*border: solid 2px #00245d;*/	/*--確認用--*/



	/*background-image: linear-gradient(to bottom, 
	rgba(255,255,255,0) 0%,
	rgb(230, 244, 255) 2%, 
	rgb(183, 206, 235) 10%,
	rgba(240, 248, 255,1) 30%, 
	rgba(255, 255, 255,1) 100%);*/

}


/*--.blessing .ambi .kameoka .plant の４つの要素のボーダー　確認用--*/
/*div .contents > div{border: solid 3px #48b45a;} */

/*----------------------------------------------------*/

/*--自然の恵みを・・・が入っている枠（親要素）：子要素の文字<p>はJSでアニメーション付与、親要素の背景をクラスで定義--*/
div .blessing{
	position: relative;
	width: 100vw;

	background-image: url(../images/sus/cloud.png);
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: cover;
	
	/*border: solid 1px #d10000;*/
}





.blessing section{
	text-align: center;
	display: block;
	width: 100vw;		/*--margin: 0 auto;　の中央揃えには幅の指定が必要--*/
	margin: 0 auto;		/*--中央揃え--*/
	position: absolute;	/*--上下の位置を指定するため--*/
	top: 25vw;			/*--上下の位置を指定--*/
}

/*--自然の恵みを・・・の画像--*/
.blessing img{
	width: 100vw;
	overflow: hidden;
	/*border: solid 2px #b44894;*/
}

.cloud{
	position: absolute;
	top: -30vw;
	left:0;
	overflow: hidden;
}

.blessing .leaf-l{
	position: absolute;
	top: -10vw;
	left:0;
	
}

.blessing .leaf-r{
	position: absolute;
	top: -8vw;
	left:0;
}

.blessing .leaf2{
	position: absolute;
	top: -14vw;
	left:-25vw;
}

.blessing .leaf3{
	position: absolute;
	top: 2vw;
	right: -15vw;
}

.blessing .flower{
	position: absolute;
	top: 0;
	left:0;
}

.blessing .chem{
	position: absolute;
	top: 10vw;
	left:0;
}

.blessing .crude{
	position: absolute;
	top: 10vw;
	left:0;
}
/*--------------------------------------------------*/


/*----------------------------------------------------*/
div .meta-panel{
	margin-bottom: 40px;
}


/*--私たちは社会のニーズに応えた と７つの画像が入った親要素--*/
div .ambi{
	position: relative;
	width: 100vw;
	margin-bottom: 10vw;	/*--下にマージンを設定して間隔をあける。--*/
	/*border: solid 1px #48b45a;*/
}

.ambi section{
	text-align: center;
	display: block;
	width: 100vw;		/*--margin: 0 auto;　で中央揃えには幅の指定が必要--*/
	margin: 0 auto;		/*--中央揃え--*/
	position: absolute;	/*--上下の位置を指定するため--*/
	top: 30vw;			/*--上下の位置を指定--*/
}


/*--共通設定--*/
.ambi .comp2,
.ambi .comp1,
.ambi .comp3,
.ambi .comp4,
.ambi .comp5,
.ambi .comp6,
.ambi .comp7 {
  position: absolute;
  transition: transform 1s ease, opacity 2s ease;
  opacity: 0; /* 初期状態は透明度0 */
}

/*--画像の大きさ（幅）をビューポート（画面幅）で指定--*/
/*--製品--*/
.ambi .comp1{
	width: 28vw;
	top:11vw;
	left:35.5vw;
}
.ambi .comp1.active {
  transform: translateY(-2vw);
  opacity: 1;
}

/*--物流--*/
.ambi .comp2{
	width: 17vw;
	top:20vw;
	left:14vw;
}
.ambi .comp2.active {
  transform: translateY(-3vw);
  opacity: 1;
}

/*--人材--*/
.ambi .comp3{
	width: 25vw;
	top:54vw;
	left:16vw;
}
.ambi .comp3.active {
  transform: translateY(-3vw);
  opacity: 1;
}

/*--設備--*/
.ambi .comp4{
	width: 15vw;
	top:35vw;
	left: 10vw;
}
.ambi .comp4.active {
  transform: translateY(-3vw);
  opacity: 1;
}

/*--ヤブラン--*/
.ambi .comp5{
	width: 20vw;
	top:44vw;
	left:72vw;
}
.ambi .comp5.active {
	transform: translateY(-3vw);
	opacity: 1;
}

/*--建物--*/
.ambi .comp6{
	width: 25vw;
	top:55vw;
	left:44vw;
}
.ambi .comp6.active {
	transform: translateY(-3vw);
	opacity: 1;
}

/*--車いす--*/
.ambi .comp7{
	width: 15vw;
	top:22vw;
	left:71vw;
}
.ambi .comp7.active {
	transform: translateY(-3vw);
	opacity: 1;
}
/*--------------------------------------------------*/



/*当社の生産拠点・亀岡市----------------------------------------------------*/
/*--画像は個別に指定した大きさの要素（包括枠img-box8～12）の背景画像として表示--*/
/*--包括枠はdiv .kameokaを基準に絶対配置されている--*/
/*--それぞれの背景画像は、画面に現れたときに拡大(.active)、画面から消えると元の大きさに戻る(remove .active)--*/
/*--.activeは拡大率が異なるため個別に記載、.inactiveは全て100%のためまとめて記載--*/

/*--当社の生産拠点・亀岡市の内容全てを含む親要素--*/
div .kameoka {
	position: relative;
	width: 100vw;
	margin-bottom: 10vw;	/*--下にマージンを設定して間隔をあける。--*/
}

.kameoka-title{
	position: absolute;
	left: 3vw;
	width: 100vw;
}

/*--当社が植物成分抽出事業を行う京都府亀岡市は--*/
.kameoka .left-container{
	position: absolute;
	top: 8vw;
	left: 3vw;
	width: 100vw;
}

/*--私たちは、環境先進都市で豊かな緑に包まれ--*/
.kameoka .right-container{
	position: absolute;
	right:5vw;
	top: 35vw;
	width: 100vw;
	text-align: right;
}	


/*--包括枠内の背景画像の共通設定--*/
.kameoka-box-warp .img-box8,
.kameoka-box-warp .img-box9,
.kameoka-box-warp .img-box10,
.kameoka-box-warp .img-box11,
.kameoka-box-warp .img-box12{
	position: absolute;		/*--.kameoka との絶対配置--*/
	overflow: hidden;		/*--拡大で包括枠をはみ出る画像は非表示、これにより内部ズームになる--*/
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;	/*--枠内での背景配置方法--*/
	transform-origin: center center;	/*--拡大時の基点は画像の中心--*/
	/*border: solid 2px #b44894;*/	/*--包括枠、大きさ確認用--*/
}


/*--亀岡盆地--*/
.kameoka-box-warp .img-box8{
	top: 25vw;	/*--画像の包括枠img-box8～12全てに独自の位置を指定--*/
	left: 3vw;	/*--画像の包括枠img-box8～12全てに独自の位置を指定--*/
	width: 40vw;
	height: 16vw;
	background-image: url(../images/sus/sus-kame-city.jpg);
}
/*--亀岡盆地　拡大--*/
.kameoka .img-box8.active {
	background-size: 115% !important;
	transition: background-size 3s;
}

/*--SDGsパー―トナー認定証--*/
.kameoka .img-box9{
	top: 2vw;
	right: 5vw;
	width: 27vw;
	height: 18vw;
	background-image: url(../images/sus/sus-kame-sdgs-pa.jpg);
}
/*--SDGsパー―トナー認定証　拡大--*/
.kameoka .img-box9.active {
	background-size: 108% !important;
	transition: background-size 5s;
}

/*--市役所別館前--*/
.kameoka .img-box10{
	top: 22vw;
	left: 28vw;
	width: 18vw;
	height: 11vw;
	background-image: url(../images/sus/sus-kame-huru.jpg);
}
/*--市役所別館前　拡大--*/
/*.kameoka .img-box10.active {
	background-size: 106% !important;
	transition: background-size 3s;
}*/

/*--緊急時特別避難--*/
.kameoka .img-box11{
	top: 4vw;
	left: 48vw;
	width: 17vw;
	height: 16vw;
	background-image: url(../images/sus/sus-kame-hinan.jpg);
}

/*--緊急時特別避難　拡大--*/
/*.kameoka .img-box11.active {
	background-size: 110% !important;
	transition: background-size 3s;
}*/

/*--KIRI no KO--*/
.kameoka .img-box12{
	top: 21vw;
	left: 49vw;
	width: 25vw;
	height: 14vw;
	background-image: url(../images/sus/sus-kame-kiri.jpg);
}
/*--KIRI no KO　拡大--*/
/*.img-box12.active {
	background-size: 110% !important;
	transition: background-size 2s;
}*/
/*--------------------------------------------------*/


/*私たちの亀岡工場　持続可能な未来に向けた活動----------------------------------------------------*/
/*--画像は個別に指定した大きさの要素（包括枠img-box8～12）の背景画像として表示--*/
/*--包括枠はdiv .plantを基準に絶対配置されている--*/
/*--それぞれの背景画像は、画面に現れたときに拡大(.active)、画面から消えると元の大きさに戻る(remove .active)--*/
/*--.activeは拡大率が異なるため個別に記載、.inactiveは全て100%のためまとめて記載--*/
div .plant{
	position: relative;
	width: 100vw;
	margin-bottom: 10vw;
}

.plant .plant-title{
	position: absolute;
	right: 4vw;
	width: 100vw;
	text-align: right;
}

.plant .right-container{
	position: absolute;
	right: 4vw;
	top: 8vw;
	width: 100vw;
	text-align: right;
}

.plant .left-container{
	position: absolute;
	left: 3vw;
	top: 33vw;
	width: 100vw;
}	


/*--包括枠内の背景画像の共通設定--*/
.plant-box-warp .img-box13,
.plant-box-warp .img-box14,
.plant-box-warp .img-box15,
.plant-box-warp .img-box16,
.plant-box-warp .img-box17,
.plant-box-warp .img-box18,
.plant-box-warp .img-box19,
.plant-box-warp .img-box20,
.plant-box-warp .img-box21,
.plant-box-warp .img-box22{
	position: absolute;		/*--.plant との絶対配置--*/
	overflow: hidden;		/*--拡大で包括枠をはみ出る画像は非表示、これにより内部ズームになる--*/
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;	/*--枠内での背景配置方法--*/
	transform-origin: center center;	/*--拡大時の基点は画像の中心--*/
	/*border: solid 2px #b44894;*/	/*--包括枠、大きさ確認用--*/
}


/*--プリウス--*/
.plant .img-box13{
	top: 2vw;
	left: 3vw;
	width: 18vw;
	height: 9vw;
	background-image: url(../images/sus/sus-plant-puri.jpg);
}
/*--　プリウス　拡大--*/
/*
.plant .img-box13.active {
	background-size: 110% !important;
	transition: background-size 3s;
}
*/

/*--太陽光発電--*/
.plant .img-box14{
	top: 8vw;
	left: 8vw;
	width: 15vw;
	height: 12vw;
	background-image: url(../images/sus/sus-plant-solar.jpg);
}
/*--太陽光発電　拡大--*/
/*.plant .img-box14 .active {
	background-size: 110% !important;
	transition: background-size 3s;
}*/

/*--デマンド監視装置--*/
.plant .img-box15{
	top: 3vw;
	left: 25vw;
	width: 12vw;
	height: 10vw;
	background-image: url(../images/sus/sus-plant-demand.jpg);
}
/*--デマンド監視装置　拡大--*/
/*.plant .img-box15.active {
	background-size: 108% !important;
	transition: background-size 3s;
}*/

/*--ガス工事--*/
.plant .img-box17{
	top: 15vw;
	left: 26vw;
	width: 15vw;
	height: 10vw;
	background-image: url(../images/sus/sus-plant-gas2.jpg);
}
/*--ガス工事　拡大--*/
/*.plant .img-box17.active {
	background-size: 110% !important;
	transition: background-size 3s;
}*/

/*--ガスメーター--*/
.plant .img-box18{
	top: 6vw;
	left: 41vw;
	width: 15vw;
	height: 22vw;
	background-image: url(../images/sus/sus-plant-gas3.jpg);
}
/*--ガスメーター　拡大--*/
.plant .img-box18.active {
	background-size: 115% !important;
	transition: background-size 3s;
}


/*--ガス地図--*/
.plant .img-box19{
	top: 21vw;
	left: 12vw;
	width: 24vw;
	height: 12vw;
	background-image: url(../images/sus/sus-plant-gas4.jpg);
}
/*--ガス地図　拡大--*/
.plant .img-box19.active {
	background-size: 118% !important;
	transition: background-size 3s;
}


/*--地中熱空調(図)--*/
.plant .img-box20{
	top: 24vw;
	left: 60vw;
	width: 24vw;
	height: 10vw;
	background-image: url(../images/sus/sus-plant-chichuu2.jpg);
	background-position: 70% 50%;
}
/*--地中熱（図）　拡大--*/
.plant .img-box20.active {
	background-size: 110% !important;
	transition: background-size 3s;
}


/*--地中熱空調工事--*/
.plant .img-box21{
	top: 30vw;
	left: 45vw;
	width: 20vw;
	height: 12vw;
	background-image: url(../images/sus/sus-plant-chichuu1.jpg);
}
/*--地中熱空調　拡大--*/
/*.plant .img-box21.active {
	background-size: 115% !important;
	transition: background-size 3s;
}*/


/*--屋上緑化--*/
.plant .img-box22{
	top: 32vw;
	right: 4vw;
	width: 23vw;
	height: 15vw;
	background-image: url(../images/sus/sus-plant-green.jpg);
}
/*--屋上緑化　拡大--*/
.plant .img-box22.active {
	background-size: 118% !important;
	transition: background-size 3s;
}
/*--------------------------------------------------*/

/*人にやさしい　地域にやさしい　環境にやさしい----------------------------------------------------*/
/*--メタセコイヤ前の写真を入れる親要素--*/
div .meta-panel {
	width: 100vw;
	height: 70vh;
	position: relative;
}
  
/*--iOSのSafariでも正しく横線を描画するためには、span要素にtopとleftの値を明示的に指定する必要があります。--*/
.meta-panel span {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}


.hitoni{
	position: absolute;
	top: -1%;
	width:100%;
	text-align: center;
}

/*--SDGsパネル（メタセコイヤ前）を格納する親要素--*/
.g-panel {
	position: absolute;
	top: 20%;
	left: 50%;

	transform: translate(-50%);
	width: 60%;
	height: calc(70vw * 2 / 5);
	overflow: hidden;
	background-image: url(../images/sus/g-panel.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
	transform-origin: center center;
	
}

.g-panel.active {
	background-size: 110% !important;
	transition: background-size 5s;
}
/*--------------------------------------------------*/


  







h2{
	opacity: 0;		/*--最初は見えなくしておく--*/
	/*background-color: rgba(255, 255, 255, 0.8);*/
	padding: 2vh 0;
	margin-bottom: 0;
	font-size: 1.7vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	text-shadow:
	2px  2px 1px rgba(255, 255, 255, 0.78),
   -2px  2px 1px rgba(255, 255, 255, 0.78),
	2px -2px 1px rgba(255, 255, 255, 0.78),
   -2px -2px 1px rgba(255, 255, 255, 0.78),
	2px  0px 1px rgba(255, 255, 255, 0.78),
	0px  2px 1px rgba(255, 255, 255, 0.78),
   -2px  0px 1px rgba(255, 255, 255, 0.78),
	0px -2px 1px rgba(255, 255, 255, 0.78);        /* 文字の影 */
}


h1{
	position: absolute;
	top: 1.3%;
	left: 6vw;			/*--横方向のビューポートに対して位置をを変更--*/
	font-size: 1.22vw;	/*--横方向のビューポートに対してサイズを変更--*/
	color: #fff;
}

/*--ゴールが始まる前にある空白 スマホ・タブレットでは-100に。--*/
.parallax-top-margin {		/*--２番目の管理棟の写真と、各ゴールの図絵の間にあける間隔、始めの少しの間隔はrgbaで透明にすること！--*/
	background-image: linear-gradient(to bottom, 
	rgba(255,255,255,0) 0%,	/*--管理棟との接点は透明に！--*/
	rgba(255, 255, 255,0) 5%, 	/*--管理棟との接点は透明に！--*/
	rgb(255, 255, 255) 20%, 
	#ffffff 100%);
	/*border: 1px solid #970a31;*/ /*--確認用--*/
}




/*--以下、各ゴールのページ--*/
/*--表題のアイコン、文字サイズの単位は「vh」にする。（レスポンシブ対応性が良い）--*/
/*--各ゴールの文字サイズの単位は「vw」にする（レスポンシブ対応性が良い）--*/

/*--まずは、パララックス効果のための１画面分(position: sticky;による固定背景)のスペースを確保--*/
.parallax {
  width: 100%;/*--背景画像の横幅--*/
  height: 125vh;/*--背景画像の高さ(画面高より少し大きく) --*/
  position: sticky;/*--背景画像を固定--*/
  top: 0;
  left: 0;
  z-index: -1;/*--z軸位置指定--*/

  /*--背景画像を挿入するとき--*/
  /*background-image: url(../images/para-demo/p1.jpg);*/
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/*-------------------------------------*/


/*--各ゴールの枠（親要素）--*/
/*--絶対配置をするため、ここでまとめて定義--*/
.g3, .g4, .g5-1, .g5-2, .g7-1, .g7-2, .g7-3, .g7-4, .g8, .g9, .g12, .g13, .g17{
	position: sticky;		/*--固定背景のためrelativeでなくsticky--*/
}



/*--全てのゴール：移動、透過設定のある要素-共通設定--*/
.g3 img, .g4 img, .g5-1 img, .g5-2 img, .g7-1 img, .g7-2 img, .g7-3 img, .g7-4 img, .g8 img, .g9 img, .g12 img, .g13 img, .g17 img,
.each-g .move,	/*--<span>タグ用のクラス--*/
.each-g .box, .each-g .box2, .each-g .box3,
.each-g .square1,
.each-g .square2,
.each-g section{
	display: block;
	position: absolute;
	transition: transform 2s ease, opacity 3s ease;
	opacity: 0; /* 初期状態は透明度0 */
}

/*--タイトルバー内のimg要素のみ上記のposition: absolute;から除外--*/
.goal-title-container img{
	position: static;
}


/*--各ゴール内で共通的に使用する文字修飾など------------ここから---*/
/*--sectionの文字色とサイズ--*/
.each-g {
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	color: #969696;
	font-size: 1.18vw;
}

.each-g section{
	line-height: 1.7;
}

/*--大きい文字--*/
.max-large span{
	font-size: 2vw !important;
}

/*--やや大きい文字--*/
.large span{
	font-size: 1.4vw !important;
}

/*--小さめの文字--*/
.small span{
	display: block;	/*--line-heightプロパティはブロックレベル要素に有効--*/
	font-size: 0.8vw !important;
	line-height: 1.5 !important;
}

.sec-small{
	font-size: 0.8vw !important;
	line-height: 1.5 !important;
}

/*--文字色の反転--*/
.reversal span {
	color: white;
	background-color: #969696;
	padding: 0 0.3vw 0.06vw 0.3vw;
}

.ov-ul-line span{
	text-decoration: overline underline;
	/* 線の色を赤色に変更 */
	text-decoration-color: #969696;
	/* 文字と線の距離を20ピクセルに変更 */
	text-decoration-skip-ink: none; /* Firefoxでは不要です */
	text-underline-offset: 0.3vw;
}

.shadow span{
	text-shadow:2px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF,  0-1px 0 #FFF,
	-1px 0 0 #FFF, 1px 0 0 #FFF;

	/*--Ｘ軸・Ｙ軸・模糊・影の色--*/
	/*--例えば、-2px -2px 0 #FFFの影の定義では、
	X軸方向に-2px（左方向に2ピクセル）のオフセット値を持ち、
	Y軸方向に-2px（上方向に2ピクセル）のオフセット値を持ちます。
	このため、テキストの左上から2ピクセルずれた位置に影が現れます。*/
}

/*--右寄せ--*/
.al-right span{
	text-align: right !important;
}

/*--中央揃え--*/
.al-center span{
	display: block;	/*--インライン要素⇒ブロック要素、強制改行時の中央寄せ--*/
	text-align: center !important;
}


/*--色指定--*/
.color-g3 span{
	color:#1b973a !important;
}

.color-g4 span{
	color:#c50e28 !important;
}

.color-g5 span{
	color:#e83418 !important;
}

.color-g7 span{
	color:#fabd00 !important;
}

.color-g8 span{
	color:#970a31 !important;
}

.color-g9 span{
	color:#ec6a06 !important;
}

.color-g12 span{
	color:#d39206 !important;
}

.color-g13 span{
	color:#3e7636 !important;
}

.color-g17 span{
	color:#023067 !important;
}


.color-normal span{
	color:#969696 !important;
}

.color-emp span{
	color:#595656 !important;
}


/*--縞模様：background-colorを追加指定して、
transparent部分の色を変更、これにより縞の色が変化させる--*/
.striped-box {
	background-image: linear-gradient(
		-45deg, 
		#ffffff 25%,
		transparent 25%, transparent 50%,
		#ffffff 50%, #ffffff 75%,
		transparent 75%, transparent 100%
	);
	background-size: 5px 5px;
	background-repeat: repeat;
}

/*--各ゴール内の文字修飾-------------ここまで---*/






/*--各目標のタイトルバー内の要素を包括する枠--*/
.tile-bar-g3,
.tile-bar-g4,
.tile-bar-g5,
.tile-bar-g7,
.tile-bar-g8,
.tile-bar-g9,
.tile-bar-g12,
.tile-bar-g13,
.tile-bar-g17{
	position: relative;
	width: 100%;	/*--単位は％に変更--*/
  	height: 11vh;	/*--レスポンシブ対応にはvhが望ましい--*/
  	font-size: 20vw;
	background-color: #fff;
	/*border: solid 3px #d39206;*/
}

/*--目標の表題を入れる要素--*/
.goal-title-container{
	display: flex;
}

/*--アイコンの大きさ(共通設置)--*/
.tile-bar-g3 img,
.tile-bar-g4 img,
.tile-bar-g5 img,
.tile-bar-g7 img,
.tile-bar-g8 img,
.tile-bar-g9 img,
.tile-bar-g12 img,
.tile-bar-g13 img,
.tile-bar-g17 img{
	height: 10vh;	/*--レスポンシブ対応にはvhが望ましい--*/
	width: 10vh;		/*--レスポンシブ対応にはvhが望ましい--*/
	margin: 0.3vw 0 0.5vw 0;
	opacity: 1;
}

/*--アイコンとその右の表題を入れる横並び要素(共通設定)--*/
.goal-title {
	height: 10vh;	/*--レスポンシブ対応にはvhが望ましい--*/
	width: 100vw;
	margin: 0.3vw 0 0.5vw 0.5vw;
	padding-left: 1vw;
	font-size: 2.5vh;
	display: flex;			/*-- 文字を垂直方向に中央に配置 --*/
	align-items: center; 	/*-- 文字を垂直方向に中央に配置 --*/
	color: #fff
}
/*--.goal-titleの文字を、あとからｈ２見出しとしたため、
.goal-titleクラス内の<h3>要素に対してfont-size: inherit;を指定,
これにより、<h3>要素は.goal-titleクラスの親要素の文字サイズを継承*/
.goal-title h3 {
	margin: 0; /* h3要素のマージンをリセット */
	font-size: inherit;
}


/*--ゴール３表題を入れる要素--*/
.tile-bar-g3 .goal-title{
	background-color: #1b973a;
}

/*--ゴール４表題を入れる要素--*/
.tile-bar-g4 .goal-title{
	background-color: #c50e28;
}

/*--ゴール５表題を入れる要素--*/
.tile-bar-g5 .goal-title{
	background-color: #e83418;
}

/*--ゴール７表題を入れる要素--*/
.tile-bar-g7 .goal-title{
	background-color: #fabd00;
}

/*--ゴール８表題を入れる要素--*/
.tile-bar-g8 .goal-title{
	background-color: #970a31;
}

/*--ゴール９表題を入れる要素--*/
.tile-bar-g9 .goal-title{
	background-color: #ec6a06;
}

/*--ゴール１２表題を入れる要素--*/
.tile-bar-g12 .goal-title{
	background-color: #d39206;
}

/*--ゴール１３表題を入れる要素--*/
.tile-bar-g13 .goal-title{
	background-color: #407936;
}

/*--ゴール１７表題を入れる要素--*/
.tile-bar-g17 .goal-title{
	background-color: #023067;
}
/*-------------------------------------*/


/*--ゴール３--*/
/*--線--*/
.g3-line-yoko1,
.g3-line-yoko2,
.g3-line-yoko3,
.g3-line-tate1,
.g3-line-tate2{
	position: absolute;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--横線１--*/
.g3-line-yoko1{
	top:23vw;
	left:0vw;
	z-index: 1;
}

/*--横線２--*/
.g3-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--横線３--*/
.g3-line-yoko3{
	top:8.3vw;
	left:37vw;
	z-index: 1;
}


/*--縦線１--*/
.g3-line-tate1{
	background-color: #1b973a;
	top: 0.1vw;
	left: 37vw;
	z-index: 1;
}

/*--縦線２--*/
.g3-line-tate2{
	background-color: #1b973a;
	top: 23vw;
	left: 82vw;
	z-index: 1;
}

/*--縞模様の大きさ--*/
.g3 .box {
	width: 1.25vw;
	height: 22.5vw;
	padding: 0.2vw;
}
.g3 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g3	.position1{
	top:0.55vw;
	left: 35.7vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g3 .bg-color {
	background-color: #c0e0ba;
}


/*--gif画像--*/
/*--寄付--*/
.g3-kihu{
	width: 29vw;
	top: 1.5vw;
	left: 1vw;
}
.g3-kihu.active {
  transform: translateX(2vw);
  opacity: 1;
}

/*--スポーツ--*/
.g3-sports{
	width: 42vw;
	top: 28vw;
	left: 2vw;
}
.g3-sports.active {
  transform: translateY(-2vw);
  opacity: 1;
}

/*--福祉--*/
.g3-hukushi{
	width: 40vw;
	top: 11vw;
	left: 42vw;
}
.g3-hukushi.active {
  transform: translateY(-2vw);
  opacity: 1;
}

/*--植樹・子ども--*/
.g3-children{
	width: 27vw;
	top: 25vw;
	left: 46vw;
}
.g3-children.active {
  transform: translateX(-2vw);
  opacity: 1;
}

/*--価値創出の背景--*/
.g3-value{
	width: 16vw; /*--left82vwの値との兼ね合いではみだし注意（横スクロールバー出現）--*/
	top: 25vw;
	left: 82vw;
}
.g3-value.active {
  transform: translateY(-2vw);
  opacity: 1;
}

/*--ゴール３文章--*/
/*--堅実な事業の発展--*/
.g3 section{
	width: 55vw;
	top: 1vw;
	left: 40vw;
}
.g3 section.active {
  opacity: 1;
}

/*--g3 span(文字)--*/
/*--保健衛生の工場と福祉の充実--*/
.g3-hoken{
	top: 21vw;
	left: 46vw;
}
.g3-hoken.active {
	opacity: 1;
}

/*--災害時における--*/
.g3-saigai{
	top: 19vw;
	left: 72vw;
	text-align: right;
}
.g3-saigai.active {
	opacity: 1;
}

/*--京都亀岡ハーフマラソン--*/
.g3-mara{
	top: 38vw;
	left: 2vw;
}
.g3-mara.active {
	opacity: 1;
}

/*--亀岡運動公園野球場整備事業--*/
.g3-undou{
	top: 38vw;
	left: 27vw;
}
.g3-undou.active {
	opacity: 1;
}

/*--次世代を担う子ども--*/
.g3-jisedai{
	top: 28vw;
	left: 45vw;
}
.g3-jisedai.active {
	opacity: 1;
}

/*--心地よいまちづくり、心地よい環境のために--*/
.g3-koko{
	top: 26vw;
	left: 69vw;
}
.g3-koko.active {
	opacity: 1;
}

/*--企業としての新たな--*/
.g3-kigyoutoshite{
	top: 28vw;
	left: 83.8vw;
}
.g3-kigyoutoshite.active {
	opacity: 1;
	transform: translateY(-2vw);
}

/*--価値創出--*/
.g3-kachi{
	top: 30.6vw;
	left: 86vw;
}
.g3-kachi.active {
	opacity: 1;
	transform: translateY(-2vw);
}

/*--収益を介した--*/
.g3-sankaku{
	top: 34.5vw;
	left: 84vw;
}
.g3-sankaku.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*-------------------------------------*/

/*--ゴール４--*/
/*--線--*/
.g4-line-yoko1,
.g4-line-yoko2,
.g4-line-yoko3,
.g4-line-tate1{
	position: absolute;
}

/*--横線１--*/
.g4-line-yoko1{
	top: 9.5vw;
	left: 0vw;
	z-index: 1;
}

/*--横線２--*/
.g4-line-yoko2{
	top: 23vw;
	left: 42.5vw;
	z-index: 1;
}

/*--横線３--*/
.g4-line-yoko3{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線１--*/
.g4-line-tate1{
	top: 0.1vw;
	left: 42.5vw;
	z-index: 1;
}

/*--縞模様の大きさ--*/
.g4 .box {
	width: 43%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g4 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g4	.position1{
	top: 9.6vw;
	left: 0vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g4 .bg-color {
	background-color: #f0adb7;
}

/*--縞模様の大きさ--*/
.g4 .box2 {
	width: 57%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g4 .box2.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g4	.position2{
	top: 21.4vw;
	left: 42.5vw;
}


/*--ゴール４文章--*/
/*--私たちの生産拠点のある--*/
.g4 .sec1{
	width: 39vw;
	top: 1.1vw;
	left: 1vw;
}
.g4 .sec1.active {
	opacity: 1;
}

/*--亀岡工場では人にやさしい--*/
.g4 .sec2{
	width: 40vw;
	top: 34vw;
	left: 1vw;
}
.g4 .sec2.active {
	opacity: 1;
}

/*--事業の節目を記念して--*/
.g4 .sec3{
	top: 1.1vw;
	left: 45vw;
}
.g4 .sec3.active {
	opacity: 1;
}

/*--亀岡市の子育て支援の--*/
.g4 .sec4{
	width: 13vw;
	top: 6vw;
	left: 45vw;
}
.g4 .sec4.active {
	opacity: 1;
}

/*--輝かしい未来を担う--*/
.g4 .sec5{
	width: 11vw;
	top: 9.5vw;
	left: 68vw;
}
.g4 .sec5.active {
	opacity: 1;
}

/*--天候を気にせず遊べる未就学児向け--*/
.g4 .sec6{
	width: 18vw;
	top: 25.5vw;
	left: 59vw;
}
.g4 .sec6.active {
	opacity: 1;
}


/*--ゴール４--*/
/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G4--*/
/*--子どもたち--*/
.g4-children {
	width: 13.5vw;
	top: 12vw;
	left: 6.5vw;	
}
.g4-children.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--kirinoko1--*/
.g4-kirinoko1 {
	width: 28vw;
	top: 21vw;
	left: -1vw;	
}
.g4-kirinoko1.active {
	transform: translateX(2vw);
	opacity: 0.5;
}

/*--kirinoko2--*/
.g4-kirinoko2 {
	width: 14vw;
	top: 12.5vw;
	left: 25vw;	
}
.g4-kirinoko2.active {
	transform: translateX(2vw);
	opacity: 0.5;
}

/*--気球（人だけ）--*/
.g4-kikyuu1 {
	width: 20vw;
	top: 14vw;
	left: 45vw;	
}
.g4-kikyuu1.active {
	transform: translateY(-2vw);
	opacity: 0.5;
}

/*--気球だけ--*/
.g4-kikyuu2 {
	width: 10vw;
	top: 5.5vw;
	left: 58vw;	
}
.g4-kikyuu2.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--サイエンスフェスタ--*/
.g4-sci {
	width: 24vw;
	top: 4vw;
	left: 72vw;	
}
.g4-sci.active {
	transform: translateY(-2vw);
	opacity: 0.5;
}

/*--遊具１（まわるやつ）--*/
.g4-yuugu1 {
	width: 13vw;
	top: 24vw;
	left: 47vw;	
}
.g4-yuugu1.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--遊具２（マット）--*/
.g4-yuugu2 {
	width: 11vw;
	top: 32.5vw;
	left: 53vw;	
}
.g4-yuugu2.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--かめまるらんど--*/
.g4-kamemaru {
	width: 26vw;
	top: 25.5vw;
	left: 70vw;	
}
.g4-kamemaru.active {
	transform: translateY(-2vw);
	opacity: 1;
}


/*--g4 span(文字)--*/
/*--KIRIN no KO--*/
.g4-kosodate {
	top: 22vw;
	left: 20vw;
}
.g4-kosodate.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--気球　in 亀岡市--*/
.g4-bal {
	top: 4vw;
	left: 45.4vw;
}
.g4-bal.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--サイエンスフェスタ（タイトル）--*/
.g4-fes {
	top: 7.5vw;
	left: 68.4vw;
}
.g4-fes.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--こどものあそびひろば（タイトル）--*/
.g4-play {
	top: 23.5vw;
	left: 59.3vw;
}
.g4-play.active {
	transform: scale(1.1);
	opacity: 1;
}
/*-------------------------------------*/


/*--ゴール５--*/
/*--線--*/
.g5-1-line-yoko1,
.g5-1-line-yoko2,
.g5-1-line-tate1,
.g5-1-1-line-tate2{
	position: absolute;
}

/*--横線--*/
.g5-1-line-yoko1{
  top:19.8vw;
  left:0vw;
  z-index: 1;
}

/*--横線２--*/
.g5-1-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線１--*/
.g5-1-line-tate1{
  background-color: #da371b;
  top: 0.5vw;
  left: 37vw;
  z-index: 1;
}


/*--縞模様の大きさ--*/
.g5-1 .box {
	width: 1.25vw;
	height: 19.3vw;
	padding: 0.2vw;
}
.g5-1 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g5-1	.position1{
	top:0.55vw;
	left: 35.7vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g5-1 .bg-color {
	background-color: #e6cdc9;
}



/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--人々--*/
.g5-1-people{
  width: 33vw;
  top: 4.7vw;
  left: -0.7vw;
}
.g5-1-people.active {
  transform: translateX(2vw);
  opacity: 1;
}

/*--G5円グラフ--*/
.g5-1-graph{
  width: 35vw;
  top: 23.4vw;
  left: 2vw;
}
.g5-1-graph.active {
  transform: translateY(-2vw);
  opacity: 1;
}

/*--階段--*/
.g5-1-step{
  width: 55vw;
  top: 22vw;
  left: 35vw;
}
.g5-1-step.active {
  transform: translateX(2vw);
  opacity: 1;
}

/*--矢印--*/
.g5-1-arrow{
	width: 4vw;
	top: 6vw;
	left: 58.5vw;
}
.g5-1-arrow.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--bbq-*/
.g5-1-bbq{
	width: 20vw;
	top: 4vw;
	left: 73vw;
}
.g5-1-bbq.active {
	transform: translateX(2vw);
	opacity: 0.2;
}

/*--ゴール５文章--*/
/*--社会人としての--*/
.g5-1 .sec1{
	width: 26vw;
	top: 1.1vw;
	left: 5.5vw;
}
.g5-1 section.active {
	opacity: 1;
}

/*--男女雇用機会均等法が--*/
.g5-1 .sec2 {
	width: 12vw;
	top: 29vw;
	left: 39vw;
}
.g5-1 .sec2.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--亀岡工場での統計においては、--*/
.g5-1 .sec3 {
	width: 12vw;
	top: 25vw;
	left: 78vw;
}
.g5-1 .sec3.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--就労は、単に収入を得る--*/
.g5-1 .sec4 {
	width: 28vw;
	top: 11vw;
	left: 66vw;
}
.g5-1 .sec3.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--背景色のある四角形--*/
.g5-1 .square1{
	width:20vw;
	height: 17vw;
	padding: 1vw;
}
.g5-1 .square1.active {
	opacity: 1;
}
.g5-1 .sq-position1 {
	top: 1.5vw;
	left: 40vw;
}

.g5-1 .square2{
	width:30vw;
	height:17vw;
	padding: 1vw;
}
.g5-1 .square2.active {
	opacity: 1;
}
.g5-1 .sq-position2 {
	top: 1.5vw;
	left: 65vw;
}

/*--.square1 .square2 の背景色--*/
.g5-1 .sq-color {
	background-color: #e6cdc9;
}

/*--g5 span(文字)--*/
/*--亀岡工場の--*/
.g5-1-koujyouno{
	top: 22.5vw;
	left: 16.5vw;
}
.g5-1-koujyouno.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--女性の割合--*/
.g5-1-ratio{
	top: 24.9vw;
	left: 14.5vw;
}
.g5-1-ratio.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--約8%--*/
.g5-1-8{
	top: 33.7vw;
	left: 7vw;
}
.g5-1-8.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--2002年--*/
.g5-1-2002{
	top: 40.4vw;
	left: 6vw;
}
.g5-1-2002.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--約20%--*/
.g5-1-20{
	top: 33.7vw;
	left: 26.8vw;
}
.g5-1-20.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--現在（2023）--*/
.g5-1-gen{
	top: 40.4vw;
	left: 28.9vw;
}
.g5-1-gen.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--子育て期の--*/
.g5-1-kosodate{
	top: 23vw;
	left: 37.5vw;
}
.g5-1-kosodate.active {
	opacity: 1;
}

/*--働く女性の--*/
.g5-1-hataraku{
	top: 38vw;
	left: 70.5vw;
}
.g5-1-hataraku.active {
	opacity: 1;
}

.g5-1 .color-change span{
	color:#e83418 !important;
}
/*-------------------------------------*/


/*--ゴール５-２--*/

/*--縞模様１の大きさ--*/
.g5-2 .box {
	width: 60.8%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g5-2 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g5-2 .position1{
	top: 6.3vw;
	left: 0;
}
/* 縞の色（ボックスの背景色）を指定 */
.g5-2 .bg-color {
	background-color: #e6cdc9;
}

/*--縞模様２の大きさ--*/
.g5-2 .box2 {
	width: 39.2%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g5-2 .box2.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g5-2 .position2{
	top: 21.3vw;
	left: 60.1vw;
}

/*--縞模様３の大きさ--*/
.g5-2 .box3 {
	width: 48.4%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g5-2 .box3.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g5-2 .position3{
	top: 23vw;
	left: 0;
}


/*--線--*/
.g5-2-line-yoko1,
.g5-2-line-yoko2,
.g5-2-line-yoko3,
.g5-2-line-tate1,
.g5-2-line-tate2{
	position: absolute;
}

/*--横線１--*/
.g5-2-line-yoko1{
  top:8vw;
  left:0vw;
  z-index: 1;
}

/*--横線２--*/
.g5-2-line-yoko2{
	top:23vw;
	left:0vw;
	z-index: 1;
}

/*--横線３--*/
.g5-2-line-yoko3{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線１--*/
.g5-2-line-tate1{
  background-color: #da371b;
  top: 0.5vw;
  left: 60.1vw;
  z-index: 1;
}


/*--縦線２--*/
.g5-2-line-tate2{
  background-color: #da371b;
  top: 23vw;
  left: 48vw;
  z-index: 1;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G5-2棒グラフ--*/
.g5-2-graph{
  width: 14.5vw;
  top: 9vw;
  left: 23vw;
}
.g5-2-graph.active {
  transform: translateX(2vw);
  opacity: 1;
}

/*--３人--*/
.g5-2-3per{
  width: 20vw;
  top: 8vw;
  left: 42vw;
}
.g5-2-3per.active {
  transform: translateX(-2vw);
  opacity: 1;
}

/*--２人--*/
.g5-2-2per{
  width: 17vw;
  top: 28vw;
  left: 0;
}
.g5-2-2per.active {
  transform: translateX(2vw);
  opacity: 1;
}

/*--生薬--*/
.g5-2-crude{
	width: 35vw;
	top: 9vw;
	left: 62vw;
}
.g5-2-crude.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--矢印--*/
.g5-2-arrow{
	width: 4.95vw;
	top: 28vw;
	left: 61vw;
}
.g5-2-arrow.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--fight--*/
.g5-2-fight{
	width: 5vw;
	top: 32.5vw;
	left: 88vw;
}
.g5-2-fight.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--背景色のある四角形--*/
.g5-2 .square1{
	width: 15vw;
	height:11vw;
	padding: 1vw;
}
.g5-2 .square1.active {
	opacity: 1;
}

.g5-2 .sq-position1 {
	top: 11.5vw;
	left: 1.5vw;
}

.g5-2 .square2{
	width: 8vw;
	height:8vw;
	padding: 1vw;
}
.g5-2 .square2.active {
	opacity: 1;
}

.g5-2 .sq-position2{
	top: 30vw;
	left: 33vw;
}

.g5-2 .sq-color{
	background-color: #e6cdc9;
}


/*--ゴール５-２文章--*/
/*--働く女性は--*/
.g5-2 section{
	width: 60vw;
	padding: 1vw;
	top: 0;
	left: 0vw;
}
.g5-2 section.active {
	opacity: 1;
}

/*--g5-2 span(文字)--*/
/*--気分が優れない--*/
.g5-2-kibunga {
	top: 9.4vw;
	left: 18vw;
}
.g5-2-kibunga.active {
	opacity: 1;
}

/*--30～50代の女性--*/
.g5-2-30-50 {
	top: 9vw;
	left: 3.75vw;
}
.g5-2-30-50.active {
	opacity: 1;
}

/*--93%--*/
.g5-2-93 {
	top: 8vw;
	left: 40.7vw;
}
.g5-2-93.active {
	opacity: 1;
}

/*--29～49歳--*/
.g5-2-29-49 {
	top: 26vw;
	left: 5vw;
}
.g5-2-29-49.active {
	opacity: 1;
}

/*--約８割は--*/
.g5-2-8wari {
	top: 32vw;
	left: 22vw;
}
.g5-2-8wari.active {
	opacity: 1;
}

/*--女性特有の--*/
.g5-2-tokuyuu {
	top: 2vw;
	left: 68.5vw;
}
.g5-2-tokuyuu.active {
	opacity: 1;
}

/*--女性向けの漢方処方--*/
.g5-2-kampo {
	top: 24vw;
	left: 60vw;
}
.g5-2-kampo.active {
	opacity: 1;
}

/*--生理痛、イライラ、ホットフラッシュ--*/
.g5-2-nayami {
	top: 28vw;
	left: 52vw;
}
.g5-2-nayami.active {
	opacity: 1;
}

/*--漢方処方--*/
.g5-2-syohou {
	top: 28vw;
	left: 70vw;
}
.g5-2-syohou.active {
	opacity: 1;
}
/*-------------------------------------*/

/*--ゴール７-１--*/
/*--縦線１--*/
.g7-1-line-tate1,
.g7-1-line-yoko1,
.g7-1-line-yoko2{
	position: absolute;
}

.g7-1-line-tate1{
	background-color: #fabd00;
	top: 0.1vw;
	left: 42.5vw;
	z-index: 1;
}

/*--横線１--*/
.g7-1-line-yoko1{
	background-color: #fabd00;
	top: 25vw;
	left: 42.5vw;
	z-index: 1;
}

/*--横線３--*/
.g7-1-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}


/*--縞模様の大きさ--*/
.g7-1 .box {
	width: 1.25vw;
	height: 41.1vw;
	padding: 0.2vw;
}
.g7-1 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g7-1 .position1{
	top:0.55vw;
	left: 41.2vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g7-1 .bg-color {
	background-color: #f5e3af;
}


/*--ゴール７-１文章--*/
/*--早い段階での--*/
.g7-1 .sec1 {
	width: 40vw;
	top: 2vw;
	left: 1.1vw;
}
.g7-1 .sec1.active {
	opacity: 1;
}

/*--工場の熱源となるエネルギー源を--*/
.g7-1 .sec2 {
	width: 53vw;
	top: 2vw;
	left: 45vw;
}
.g7-1 .sec2.active {
	opacity: 1;
}

/*--地球温暖化の歯止め担うことは、--*/
.g7-1 .sec3 {
	width: 24vw;
	top:26vw;
	left: 45vw;
}
.g7-1 .sec3.active {
	opacity: 1;
}

/*--g7-1 span(文字)--*/
/*--窒素酸化物--*/
.g7-1-osen {
	top: 15.3vw;
	left: 18vw;
}
.g7-1-osen.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--排出削減（左）--*/
.g7-1-sakugen1 {
	top: 10.3vw;
	left: 4.9vw;
}
.g7-1-sakugen1.active {
	transform: translateY(-2vw);
	opacity: 1;
	z-index: 1;
}

/*--排出削減（右）--*/
.g7-1-sakugen2 {
	top: 18.5vw;
	left: 82.8vw;
}
.g7-1-sakugen2.active {
	transform: translateY(2vw);
	opacity: 1;
	z-index: 1;
}

/*--ガスco2--*/
.g7-1-gas-co2 {
	top: 11vw;
	left: 64.8vw;
}
.g7-1-gas-co2.active {
	transform: scale(1.3);
	opacity: 1;
}

/*--約25%--*/
.g7-1-25 {
	top: 13.7vw;
	left: 64.45vw;
}
.g7-1-25.active {
	transform: scale(1.5);
	opacity: 1;
}

/*--削減3--*/
.g7-1-sakugen3 {
	top: 17.5vw;
	left: 65.4vw;
}
.g7-1-sakugen3.active {
	transform: scale(1.2);
	opacity: 1;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G7-1--*/
/*--NOx--*/
.g7-1-nox{
	width: 17vw;
	top: 10.4vw;
	left: 1vw;
}
.g7-1-nox.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--co2(雲)--*/
.g7-1-co2{
	width: 22vw;
	top: 4.5vw;
	left: 75vw;
}
.g7-1-co2.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--原料生薬--*/
.g7-1-crude{
	width: 16vw;
	top: 29vw;
	left: 70vw;
}
.g7-1-crude.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--ガスメーター--*/
.g7-1-gas{
	width: 33vw;
	top: 7vw;
	left: 46vw;
}
.g7-1-gas.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--画面右側の森林--*/
.g7-1-forest{
	width: 14vw;
	top: 26.5vw;
	left: 83vw;
}
.g7-1-forest.active {
	transform: translateX(-2vw);
	opacity: 0.2;
}

/*-- 車--*/
.g7-1-car1 {
	width: 40vw;
	top: 23.5vw;
	left: -2vw;
}
.g7-1-car1.active {
	transform: translateX(2vw);
	opacity: 1;
}

.g7-1-car2 {
	width: 20vw;
	top: 23.5vw;
	left: 22vw;
}
.g7-1-car2.active {
	transform: translateX(-2vw);
	opacity: 1;
}

.g7-1-car3 {
	width: 15vw;
	top: 12.5vw;
	left: 22vw;
}
.g7-1-car3.active {
	transform: translateX(2vw);
	opacity: 0.3;
}
/*-------------------------------------*/


/*--ゴール７-２文章--*/
/*--東日本大震災--*/
.g7-2 .sec1 {
	width: 40vw;
	top: 1vw;
	left: 1.7vw;
}
.g7-2 .sec1.active {
	opacity: 1;
}

/*--亀岡工場では--*/
.g7-2 .sec2 {
	width: 9vw;
	top: 7vw;
	left: 33vw;
}
.g7-2 .sec2.active {
	opacity: 1;
}

/*--工場全域に芝生緑化--*/
.g7-2 .sec3 {
	width: 52vw;
	top: 1vw;
	left: 45vw;
}
.g7-2 .sec3.active {
	opacity: 1;
}

/*--環境緑化への取組み －--*/
.g7-2 .sec4 {
	width: 13vw;
	top: 7.5vw;
	left: 84vw;
}
.g7-2 .sec4.active {
	opacity: 1;
}

/*--私たちは、--*/
.g7-2 .sec5 {
	width: 39vw;
	top: 37vw;
	left: 52vw;
}
.g7-2 .sec5.active {
	transform: translateY(-2vw);
	opacity: 1;
}

.g7-2-line-yoko1,
.g7-2-line-yoko2,
.g7-2-line-tate1{
	position: absolute;
}

/*--横線--*/
.g7-2-line-yoko1{
	top:22.5vw;
	left:0vw;
	z-index: 1;
}

/*--横線２--*/
.g7-2-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線--*/
.g7-2-line-tate1{
	top: 0.5vw;
	left: 42.7vw;
	z-index: 1;
}

/*--縞模様の大きさ--*/
.g7-2 .box {
	width: 1.25vw;
	height: 21.9vw;
	padding: 0.2vw;
}
.g7-2 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g7-2 .position1{
	top: 0.55vw;
	left: 42.75vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g7-2 .bg-color {
	background-color: #f5e3af;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G7-2--*/
/*--ピーク--*/
.g7-2-peak{
	width: 31vw;
	top: 3.5vw;
	left: -1vw;
}
.g7-2-peak.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--屋上温度グラフ--*/
.g7-2-graph{
	width: 24vw;
	top: 26.5vw;
	left: 1vw;
}
.g7-2-graph.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--管理棟--*/
.g7-2-kanri{
	width: 27vw;
	top: 24.2vw;
	left: 25vw;
}
.g7-2-kanri.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*--管理棟(スマホ用)--*/
.g7-2-kanri-2{
	display: none;
}


/*--管理棟--*/
.g7-2-yane{
	width: 40vw;
	top: 25.3vw;
	left: 52vw;
}
.g7-2-yane.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--集い（家族）--*/
.g7-2-tsudoi{
	width: 18vw;
	top: 13vw;
	left: 47.5vw;
}
.g7-2-tsudoi.active {
	transform: scale(1.1);
	opacity: 0.8;
}

/*--桜と銀杏の枝--*/
.g7-2-green{
	width: 14vw;
	top: 9vw;
	left: 68.5vw;
}
.g7-2-green.active {
	transform: scale(1.1);
	opacity: 0.8;
}

/*--御堂筋--*/
.g7-2-namiki{
	width: 37vw;
	top: 4.5vw;
	left: 45vw;
}
.g7-2-namiki.active {
	transform: translateY(-2vw);
	opacity: 0.2;
}

/*--g7-2 span(文字)--*/
/*--集中可動--*/
.g7-2-syu {
	top: 5.7vw;
	left: 3.5vw;
}
.g7-2-syu.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--分散可動--*/
.g7-2-bun {
	top: 5.7vw;
	left: 17.5vw;
}
.g7-2-bun.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--23%--*/
.g7-2-23 {
	top: 17.5vw;
	left: 10.8vw;
}
.g7-2-23.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--45%--*/
.g7-2-45 {
	top: 17.5vw;
	left: 18vw;
}
.g7-2-45.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--ピークカット--*/
.g7-2-cut {
	top: 9.7vw;
	left: 24vw;
}
.g7-2-cut.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--45.9%--*/
.g7-2-max45 {
	top: 10.80vw;
	left: 23.7vw;
}
.g7-2-max45.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--ピークシフト--*/
.g7-2-shift {
	top: 16.3vw;
	left: 24vw;
}
.g7-2-shift.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--夏季日中屋上温度--*/
.g7-2-summer {
	top: 26.5vw;
	left: 5vw;
}
.g7-2-summer.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--最大約60℃--*/
.g7-2-max60 {
	top: 26.3vw;
	left: 16.2vw;
}
.g7-2-max60.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--最大約30℃--*/
.g7-2-max30 {
	top: 33.2vw;
	left: 16.2vw;
}
.g7-2-max30.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--約３０℃低--*/
.g7-2-30 {
	top: 33.2vw;
	left: 6.1vw;
}
.g7-2-30.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--緑化なし--*/
.g7-2-false {
	top: 41.2vw;
	left: 2.8vw;
}
.g7-2-false.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--緑化あり--*/
.g7-2-true {
	top: 41.2vw;
	left: 12vw;
}
.g7-2-true.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--雨水循環--*/
.g7-2-usui {
	top: 25vw;
	left: 30.8vw;
}
.g7-2-usui.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--ヒートアイランド--*/
.g7-2-heat {
	top: 29vw;
	left: 30.8vw;
}
.g7-2-heat.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--緑化土壌による断熱と蒸散--*/
.g7-2-dojo {
	top: 26.4vw;
	left: 63.6vw;
}
.g7-2-dojo.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--夏季：２～３℃低--*/
.g7-2-2-3 {
	top: 28vw;
	left: 65.3vw;
}
.g7-2-2-3.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--冬季：１～２℃高--*/
.g7-2-1-2 {
	top: 30vw;
	left: 65.3vw;
}
.g7-2-1-2.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--冷暖房エネルギーの削減--*/
.g7-2-reidan {
	top: 31.5vw;
	left: 65.3vw;
}
.g7-2-reidan.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*-------------------------------------*/


/*--再生可能エネルギーを有効活用し--*/
/*--ゴール７-３--*/
/*--横線１--*/
.g7-3-line-tate1,
.g7-3-line-yoko1{
	position: absolute;
}

.g7-3-line-tate1{
	top: 0.1vw;
	left: 45.3vw;
	z-index: 1;
}

/*--横線１--*/
.g7-3-line-yoko1{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縞模様の大きさ--*/
.g7-3 .box {
	width: 1.25vw;
	height: 41.2vw;
	padding: 0.2vw;
}
.g7-3 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g7-3 .position3{
	top:0.5vw;
	left: 45.5vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g7-3 .bg-color {
	background-color: #f5e3af;
}


/*--ゴール７-３文章--*/
/*--亀岡工場の管理棟と研究棟に、--*/
.g7-3 .sec1 {
	width: 44vw;
	top: 1vw;
	left: 1vw;
}
.g7-3 .sec1.active {
	opacity: 1;
}

/*--導入後の実績に基づいた--*/
.g7-3 .sec2 {
	width: 10vw;
	top: 18.5vw;
	left: 21vw;
}
.g7-3 .sec2.active {
	opacity: 1;
}

/*--亀岡工場の銀杏は５０本、--*/
.g7-3 .sec3 {
	width: 10vw;
	top: 30vw;
	left: 21vw;
}
.g7-3 .sec3.active {
	opacity: 1;
}

/*--研究棟の太陽光発電は--*/
.g7-3 .sec4 {
	width: 49vw;
	top: 1vw;
	left: 48vw;
}
.g7-3 .sec4.active {
	opacity: 1;
}

/*--導入後の実績に基づいた--*/
.g7-3 .sec5 {
	width: 9vw;	
	top: 22vw;
	left: 49.5vw;
}
.g7-3 .sec5.active {
	opacity: 1;
}

/*--「エネルギーをみんなにそしてクリーンに」--*/
.g7-3 .sec6 {
	width: 35vw;
	top: 33.5vw;
	left: 48vw;
}
.g7-3 .sec6.active {
	opacity: 1;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G8 地元雇用の割合--*/
/*--地中熱空調--*/
.g7-3-hyb{
	width: 31vw;
	top: 11.5vw;
	left: 1vw;
}
.g7-3-hyb.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--工場全体--*/
.g7-3-plant{
	width: 17vw;
	top: 27.5vw;
	left: 1vw;
}
.g7-3-plant.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--カッコ線--*/
.g7-3-line{
	width: 3vw;
	top: 17.5vw;
	left: 28.5vw;
}
.g7-3-line.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--銀杏--*/
.g7-3-gink{
	width: 10vw;
	top: 19.5vw;
	left: 33vw;
}
.g7-3-gink.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--森林--*/
.g7-3-forest{
	width: 11vw;
	top: 11vw;
	left: 48vw;
}
.g7-3-forest.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--パネル--*/
.g7-3-panel{
	width: 18vw;
	top: 17vw;
	left: 60vw;
}
.g7-3-panel.active {
	transform: scale(1.15);
	opacity: 1;
}

/*--ポリタンク--*/
.g7-3-tank{
	width: 17vw;
	top: 8vw;
	left: 79vw;
}
.g7-3-tank.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--上呂--*/
.g7-3-jyo{
	width: 10vw;
	top: 11vw;
	left: 60vw;
}
.g7-3-jyo.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--チューブ（ポリタンクの）--*/
.g7-3-tube{
	width: 5.8vw;
	top: 10vw;
	left: 70.5vw;
}
.g7-3-tube.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--電源コード--*/
.g7-3-code{
	width: 15vw;
	top: 27vw;
	left: 61vw;
}
.g7-3-code.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--研究棟--*/
.g7-3-labo{
	width: 15vw;
	top: 25vw;
	left: 80vw;
}
.g7-3-labo.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--ストライプ文字背景（上）--*/
.g7-3 .position1 {
	width: 15vw;
	top: 9vw;
	left: 46vw;
}
.g7-3 .position1.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--ストライプ文字背景（下）--*/
.g7-3 .position2 {
	width: 15vw;
	top: 17vw;
	left: 77.5vw;
}
.g7-3 .position2.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--g7-3 span(文字)--*/
/*--地中熱空調--*/
.g7-3-chityuu {
	top: 17vw;
	left: 2.5vw;
}
.g7-3-chityuu.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--銀杏５０--*/
.g7-3-tree50 {
	top: 24.5vw;
	left: 0.7vw;
}
.g7-3-tree50.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--３ＭＴＣＯ２--*/
.g7-3-3co2 {
	top: 26.5vw;
	left: 1.1vw;
}
.g7-3-3co2.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--３６ＭＴ/年 ＣＯ2--*/
.g7-3-36co2 {
	top: 20vw;
	left: 1vw;
}
.g7-3-36co2.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--銀杏６００本--*/
.g7-3-600 {
	top: 21.5vw;
	left: 33.7vw;
}
.g7-3-600.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--森林換算--*/
.g7-3-conv1 {
	top: 8.76vw;
	left: 47.4vw;
}
.g7-3-conv1.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--１８Lポリタンク--*/
.g7-3-18L {
	top: 7.8vw;
	left: 86.5vw;
}
.g7-3-18L.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--石油換算--*/
.g7-3-conv2 {
	top: 16.88vw;
	left: 78.8vw;
}
.g7-3-conv2.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--太陽光発電--*/
.g7-3-sun {
	top: 25vw;
	left: 79vw;
}
.g7-3-sun.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--７ＭＴ/年 ＣＯ2--*/
.g7-3-7co2 {
	top: 28vw;
	left: 78.5vw;
}
.g7-3-7co2.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*-------------------------------------*/


/*--ゴール７-４--*/
/*--ゴール７-４文章--*/
/*--より濃いエキスでCO2排出削減--*/
.g7-4-sec1 {
	top: 1vw;
	left: 5vw;
}
.g7-4-sec1.active {
	opacity: 1;
}

/*--例えば、ドリンク剤に使用される原料--*/
.g7-4-sec2 {
	width: 21vw;
	top: 14vw;
	left: 3vw;
}
.g7-4-sec2.active {
	opacity: 1;
}

/*--例１.--*/
.g7-4-sec3 {
	top: 28vw;
	left: 3vw;
}
.g7-4-sec3.active {
	opacity: 1;
	transform: translateY(-2vw);
}

/*--例２.--*/
.g7-4-sec4 {
	top: 36vw;
	left: 3vw;
}
.g7-4-sec4.active {
	opacity: 1;
	transform: translateY(-2vw);
}

/*--原料生薬１００ｋｇを、同一の抽出溶媒 ＋ 同一の抽出方法に--*/
.g7-4-sec5 {
	top: 1vw;
	left: 33.5vw;
}
.g7-4-sec5.active {
	opacity: 1;
}

/*--対応比は当社の標準製造法に基づくエキス収率--*/
.g7-4-sec6 {
	top: 4.5vw;
	left: 48vw;
}
.g7-4-sec6.active {
	opacity: 1;
}

/*--横線１--*/
.g7-4-line-yoko1{
	position: absolute;
}
.g7-4-line-yoko1{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線１--*/
.g7-4-line-tate1{
	position: absolute;
	top: 0.1vw;
	left: 26.3vw;
	z-index: 1;
}

/*--縞模様の大きさ--*/
.g7-4 .box {
	width: 1.25vw;
	height: 41.2vw;
	padding: 0.2vw;
}
.g7-4 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g7-4 .position3{
	top:0.5vw;
	left: 26.4vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g7-4 .bg-color {
	background-color: #f5e3af;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--CO2--*/
.g7-4-co2{
	width: 14vw;
	top: 1vw;
	left: 6.5vw;
}
.g7-4-co2.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--測り--*/
.g7-4-w-scale{
	width: 10vw;
	top: 32vw;
	left: 13vw;
}
.g7-4-w-scale.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--コウジン--*/
.g7-4-koujin{
	width: 7vw;
	top: 18.5vw;
	left: 12.5vw;
}
.g7-4-koujin.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--ボタンピ--*/
.g7-4-botanpi{
	width: 7vw;
	top: 21.5vw;
	left: 18vw;
}
.g7-4-botanpi.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--↓の矢印(上)--*/
.g7-4-ar1-position1{
	width: 1vw;
	top: 14vw;
	left: 34.55vw;
}
.g7-4-ar1-position1.active {
	transform: translateY(1vw);
	opacity: 1;
}
/*--↓の矢印(下)--*/
.g7-4-ar1-position2{
	width: 1vw;
	top: 26vw;
	left: 34.55vw;
}
.g7-4-ar1-position2.active {
	transform: translateY(1vw);
	opacity: 1;
}

/*--横の太い縞矢印(上)--*/
.g7-4-ar2-position1{
	width: 10vw;
	top: 9.5vw;
	left: 37vw;
}
.g7-4-ar2-position1.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}
/*--横の太い縞矢印(中央)--*/
.g7-4-ar2-position2{
	width: 10vw;
	top: 21.6vw;
	left: 37vw;
}
.g7-4-ar2-position2.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}
/*--横の太い縞矢印(下)--*/
.g7-4-ar2-position3{
	width: 10vw;
	top: 33.7vw;
	left: 37vw;
}
.g7-4-ar2-position3.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}

/*--４重の太い縞矢印(上)--*/
.g7-4-ar3-position1{
	width: 7vw;
	top: 8.5vw;
	left: 63vw;
}
.g7-4-ar3-position1.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}
/*--４重の太い縞矢印(中央)--*/
.g7-4-ar3-position2{
	width: 7vw;
	top: 20.5vw;
	left: 63vw;
}
.g7-4-ar3-position2.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}
/*--４重の太い縞矢印(下)--*/
.g7-4-ar3-position3{
	width: 7vw;
	top: 32.5vw;
	left: 63vw;
}
.g7-4-ar3-position3.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}

/*--円グラフ(上)--*/
.g7-4-cir-lx{
	width: 11vw;
	top: 6vw;
	left: 72vw;
}
.g7-4-cir-lx.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}
/*--円グラフ(中央)--*/
.g7-4-cir-sx{
	width: 11vw;
	top: 18.3vw;
	left: 72vw;
}
.g7-4-cir-sx.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}
/*--円グラフ(下)--*/
.g7-4-cir-dx{
	width: 11vw;
	top: 30.6vw;
	left: 72vw;
}
.g7-4-cir-dx.active {
	transform: translate(2vw,-2vw);
	opacity: 1;
}

/*--流エキス--*/
.g7-4-lx{
	width: 7vw;
	top: 8vw;
	left: 53vw;
}
.g7-4-lx.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--軟エキス--*/
.g7-4-sx{
	width: 10vw;
	top: 18vw;
	left: 52vw;
}
.g7-4-sx.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--乾燥エキス--*/
.g7-4-dx{
	width: 11vw;
	top: 33vw;
	left: 52vw;
}
.g7-4-dx.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--抽出〇--*/
.g7-4-ext2{
	width: 10vw;
	top: 6.7vw;
	left: 30vw;
}
.g7-4-ext2.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--濃縮〇--*/
.g7-4-con{
	width: 10vw;
	top: 19vw;
	left: 30vw;
}
.g7-4-con.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--噴霧乾燥〇--*/
.g7-4-spr{
	width: 10vw;
	top: 31vw;
	left: 30vw;
}
.g7-4-spr.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--g7-4 span(文字)--*/
/*--例１コウジン
	例２ボタンピ--*/
.g7-4-ex {
	top: 23vw;
	left: 3vw;	
}
.g7-4-ex.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--１００ｋｇ--*/
.g7-4-100kg {
	top: 25vw;
	left: 13.5vw;	
}
.g7-4-100kg.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--抽出（工程）--*/
.g7-4-extr {
	top: 10.28vw;
	left: 39.6vw;	
}
.g7-4-extr.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--液体から--*/
.g7-4-dilu {
	top: 17vw;
	left: 38.5vw;	
}
.g7-4-dilu.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--濃縮（工程）--*/
.g7-4-conce {
	top: 22.5vw;
	left: 39.6vw;	
}
.g7-4-conce.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--濃縮物または乾燥物へ--*/
.g7-4-conc {
	top: 28.85vw;
	left: 38.5vw;	
}
.g7-4-conc.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--濃縮（工程）--*/
.g7-4-conc {
	top: 28.85vw;
	left: 38.5vw;	
}
.g7-4-conc.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--乾燥（工程）--*/
.g7-4-sp {
	top: 34.4vw;
	left: 39.6vw;	
}
.g7-4-sp.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--１：１--*/
.g7-4-1-1 {
	top: 17vw;
	left: 53.55vw;	
}
.g7-4-1-1.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--５：１--*/
.g7-4-5-1 {
	top: 28vw;
	left: 53.55vw;	
}
.g7-4-5-1.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--１０：１--*/
.g7-4-10-1 {
	top: 39.9vw;
	left: 53.2vw;	
}
.g7-4-10-1.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--１００L--*/
.g7-4-100L {
	top: 10.1vw;
	left: 50.3vw;	
}
.g7-4-100L.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--２０ｋｇ--*/
.g7-4-20kg {
	top: 22.45vw;
	left: 50.3vw;	
}
.g7-4-20kg.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--１０ｋｇ--*/
.g7-4-10kg {
	top: 34.45vw;
	left: 50.3vw;	
}
.g7-4-10kg.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--コウジン流エキス、ボタンピ流エキス--*/
.g7-4-koujin-lx {
	top: 13.4vw;
	left: 54vw;		
}
.g7-4-koujin-lx.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--ボタンピ軟エキス--*/
.g7-4-botanpi-sx {
	top: 26vw;
	left: 54vw;		
}
.g7-4-botanpi-sx.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--コウジン乾燥エキス--*/
.g7-4-koujin-dx {
	top: 38vw;
	left: 53.5vw;		
}
.g7-4-koujin-dx.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--ＣＯ２　０.５０t--*/
.g7-4-050t {
	top: 8vw;
	left: 75vw;	
}
.g7-4-050t.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--ＣＯ２　０.３４t--*/
.g7-4-034t {
	top: 20.3vw;
	left: 75vw;	
}
.g7-4-034t.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--ＣＯ２　０.３８t--*/
.g7-4-038t {
	top: 32.48vw;
	left: 75vw;	
}
.g7-4-038t.active {
	transform: translate(2vw, -2vw);
	opacity: 1;
}

/*--１００％--*/
.g7-4-100 {
	top: 8.8vw;
	left: 86vw;	
}
.g7-4-100.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--３２％--*/
.g7-4-32 {
	top: 21vw;
	left: 87vw;	
}
.g7-4-32.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--２４％--*/
.g7-4-24 {
	top: 33vw;
	left: 87vw;	
}
.g7-4-24.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--0.5t(100L)×100L/100L＝0.50ｔ--*/
.g7-4-cal050 {
	top: 15.5vw;
	left: 70vw;	
}
.g7-4-cal050.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--1.7t(100kg)×20kg/100kg＝0.34ｔ--*/
.g7-4-cal034{
	top: 27.7vw;
	left: 70vw;	
}
.g7-4-cal034.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--3.8t(100kg)×10kg/100kg＝0.38ｔ--*/
.g7-4-cal038{
	top: 40vw;
	left: 70vw;	
}
.g7-4-cal038.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*-------------------------------------*/





/*--ゴール８文章--*/
/*--地元住民を積極的に--*/
.g8 section{
	width: 92vw;
	top: 1vw;
	left: 2vw;
}
.g8 section.active {
	opacity: 1;
}


/*--縞模様の大きさ--*/
.g8 .box {
	width: 100%;
	height: 2vw;
	padding: 0.2vw;
}
.g8 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g8 .position1{
	top: 8vw;
	left: 0;
}
/* 縞の色（ボックスの背景色）を指定 */
.g8 .bg-color {
	background-color: #e6cdc9;
}

/*--線--*/
.g8-line-yoko1,
.g8-line-yoko2,
.g8-line-tate1{
	position: absolute;
}

/*--横線１--*/
.g8-line-yoko1{
	top:10vw;
	left:0vw;
	z-index: 1;
}

/*--横線２--*/
.g8-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線１--*/
.g8-line-tate1{
	background-color: #970a31;
	top: 10.1vw;
	left: 42.5vw;
	z-index: 1;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G8 地元雇用の割合--*/
.g8-koyou{
	width: 41vw;
	top: 12vw;
	left: -1vw;
}
.g8-koyou.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--G8 1990年--*/
.g8-1990{
	width: 27vw;
	top: 13.98vw;
	left: 44vw;
}
.g8-1990.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--G8 2023年--*/
.g8-2023{
	width: 27vw;
	top: 10vw;
	left: 70vw;
}
.g8-2023.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--g8 span(文字)--*/
/*--亀岡工場の--*/
.g8-kameoka {
	top: 12vw;
	left: 16vw;	
}
.g8-kameoka.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--地域従業員--*/
.g8-chiiki {
	top: 15.3vw;
	left: 11.35vw;	
}
.g8-chiiki.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--約39%--*/
.g8-39{
	top: 26vw;
	left: 3.6vw;
}
.g8-39.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--約2002年--*/
.g8-2002{
	top: 33vw;
	left: 3.5vw;
}
.g8-2002.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--約60%--*/
.g8-60{
	top: 26vw;
	left: 29vw;
}
.g8-60.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--現在（2023）--*/
.g8-gen{
	top: 33vw;
	left: 31vw;
}
.g8-gen.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--亀岡工場：1990年--*/
.g8-k1990 {
	top: 14.8vw;
	left: 44vw;	
}
.g8-k1990.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--亀岡工場：現在--*/
.g8-now {
	top: 32.6vw;
	left: 74vw;	
}
.g8-now.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--事業の発展≒地域雇用の拡充--*/
.g8-deve {
	top: 15.8vw;
	left: 75vw;	
}
.g8-deve.active {
	transform: scale(1.2);
	opacity: 1;
}
/*-------------------------------------*/

/*--ゴール９--*/
/*--G9文章--*/
.g9-sec1{
	top: 1vw;
	left: 1vw
}
.g9-sec1.active {
	opacity: 1;
}

.g9-sec2{
	top: 24.3vw;
	left: 1vw
}
.g9-sec2.active {
	opacity: 1;
}


/*--縞模様の大きさ--*/
.g9 .box {
	width: 1.2vw;
	height: 22.4vw;
	padding: 0.2vw;
}
.g9 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g9 .position1{
	top: 0.55vw;
	left: 45vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g9 .bg-color {
	background-color: #f7c6a1;
}

/*--縞模様の大きさ--*/
.g9 .box2 {
	width: 1.2vw;
	height: 18.5vw;
	padding: 0.2vw;
}
.g9 .box2.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g9 .position2{
	top: 23vw;
	left: 59.3vw;
}

/*--線(共通)--*/
.g9-line-yoko1,
.g9-line-yoko2,
.g9-line-yoko3,
.g9-line-tate1,
.g9-line-tate2,
.g9-line-tate3,
.g9-line-tate4{
	position: absolute;
}

/*--横線--*/
.g9-line-yoko1{
	top: 23vw;
	left: 0;
}

/*--横線（太）--*/
.g9-line-yoko2{
	top: 11.7vw;
	left: 48vw;
	left: 67%; /* 要素の左側を中心に配置 */
    transform: translateX(-50%); /* 中心揃え */
	width: 0;	/*--伸びる前の幅を指定します--*/
	height: 6px; /*--伸びる前の太さを指定します--*/
	transition: width 2s; /*--幅が変化する際のトランジション時間を2秒に設定します--*/
}
.g9-line-yoko2.active {
    width: 39%; /*--線が中心から左右に伸びる幅を指定します--*/
}

/*--横線３--*/
.g9-line-yoko3{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線--*/
.g9-line-tate1{
	top: 0.55vw;
	left: 45vw;
}

/*--縦線２--*/
.g9-line-tate2{
	top: 23vw;
	left: 60.5vw;
}

/*--縦線３（太）--*/
.g9-line-tate3{
	top: 12vw;
	left: 59.5vw;
	width: 6px; 
	height: 0;
	
	transform: translateY(-50%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 2s;
	animation-name: expandHeight1; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

/*--縦線４（太）--*/
.g9-line-tate4{
	top: 12vw;
	left: 72.7vw;
	width: 6px; 
	height: 20vw;

	transform: translateY(-50%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 2s;
	animation-name: expandHeight1; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

@keyframes expandHeight1 {
	from {
	  height: 0px; /* 開始時の高さ */
	}
	to {
	  height: 380px; /* 終了時の高さ */
	}
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G9 配置図--*/
.g9-haichi{
	width: 41vw;
	top: 1vw;
	left: 1vw;
}
.g9-haichi.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--第１第２--*/
.g9-1and2{
	width: 55vw;
	top: 27vw;
	left: 1vw;
}
.g9-1and2.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--原料管理(スマートフォン・縦)--*/
.g9-mate{
	width: 9vw;
	top: 0vw;
	left: 47vw;
}
.g9-mate.active {
    transform: translate(2vw, 2vw);
    opacity: 1; 
    transition: transform 1.5s, opacity 1.5s;
}

/*--抽出(スマートフォン・縦)--*/
.g9-ext{
	width: 9vw;
	top: 0vw;
	left: 62vw;
}
.g9-ext.active {
    transform: translateY(2vw);
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s;
}

/*--濃縮(スマートフォン・縦)--*/
.g9-con{
	width: 9vw;
	top: 0vw;
	left: 77vw;
}
.g9-con.active {
    transform: translate(-2vw, 2vw);
    opacity: 1; 
    transition: transform 1.5s, opacity 1.5s;
}

/*--噴霧(スマートフォン・縦)--*/
.g9-spr{
	width: 9vw;
	top: 15vw;
	left: 47vw;
}
.g9-spr.active {
    transform: translate(2vw, -2vw);
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s; 
}

/*--製剤(スマートフォン・縦)--*/
.g9-phar{
	width: 9vw;
	top: 15vw;
	left: 62vw;
}
.g9-phar.active {
    transform: translateY(-2vw);
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s; 
}

/*--製品(スマートフォン・縦)--*/
.g9-prod{
	width: 9vw;
	top: 15vw;
	left: 77vw;
}
.g9-prod.active {
    transform: translate(-2vw, -2vw);
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s; 
}

/*--(スマートフォン・縦)--*/
.g9-ext2{
	width: 9vw;
	top: 31vw;
	left: 23.2vw;
}
.g9-ext2.active {
    transform: translateY(-2vw);
    opacity: 1;
}

/*--線と点--*/
.g9-dots-line{
	width: 11vw;
	top: 27vw;
	left: 65vw;
}
.g9-dots-line.active {
    transform: translateY(-2vw);
    opacity: 1;
}

/*--火災--*/
.g9-fire{
	width: 3.7vw;
	top: 23.6vw;
	left: 80vw;	
}
.g9-fire.active {
    transform: translateX(-2vw);
    opacity: 1;
}

/*--ぐるぐる矢印--*/
.g9-cir{
	width: 4vw;
	top: 32.5vw;
	left: 69vw;	
}
.g9-cir.active {
    transform: translateX(2vw);
    opacity: 1;
}

/*--作業員--*/
.g9-ope{
	width: 9vw;
	top: 23.5vw;
	left: 87.5vw;
}
.g9-ope.active {
    transform: translateX(-2vw);
    opacity: 1;
}

/*--g9 span(文字)--*/
/*--独立化--*/
.g9-inde {
	top: 9.2vw;
	left: 89vw;	
}
.g9-inde.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--バックアップ（抽出）--*/
.g9-back {
	top: 27.2vw;
	left: 24.3vw;	
}
.g9-back.active {
	transform: translateY(-2vw);
	transform: scale(1.1);
	opacity: 1;
	transition: transform 1.5s, opacity 1.5s; 
}

/*--万一の火災でも--*/
.g9-kasai {
	top: 24.2vw;
	left: 61vw;	
}
.g9-kasai.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--延焼は無--*/
.g9-ensyou {
	top: 27.5vw;
	left: 73.2vw;	
}
.g9-ensyou.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--全ての工程に--*/
.g9-all {
	top: 29.5vw;
	left: 61vw;	
}
.g9-all.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--強靭なインフラ構築--*/
.g9-strong {
	top: 37vw;
	left: 69.2vw;	
}
.g9-strong.active {
	transform: translateX(-2vw);
	opacity: 1;
}
/*-------------------------------------*/



/*--ゴール１２--*/
/*--G12文章--*/
/*--亀岡工場の管理棟は--*/
.g12-sec1{
	width: 50vw;
	top: 1vw;
	left: 1vw
}
.g12-sec1.active {
	opacity: 1;
}

/*--万一のロックダウン--*/
.g12-sec2{
	width: 45vw;
	top: 36.5vw;
	left: 1vw
}
.g12-sec2.active {
	opacity: 1;
}

/*--働き方改革--*/
.g12-sec3{
	width: 46vw;
	top: 13vw;
	left: 50vw
}
.g12-sec3.active {
	opacity: 1;
}

/*--社内ネットワークやサテライト--*/
.g12-sec4{
	top: 18vw;
	left: 50vw
}
.g12-sec4.active {
	opacity: 1;
}

/*--線(共通)--*/
.g12-line-yoko1,
.g12-line-yoko2,
.g12-line-yoko3,
.g12-line-tate2{
	position: absolute;
}



/*--縦線２--*/
.g12-line-tate2{
	top: 0.1vw;
	left: 47.8vw;
	z-index: 1;
}

/*--横線１--*/
.g12-line-yoko1{
	top: 33.9vw;
	left: 0vw;
}

/*--横線２--*/
.g12-line-yoko2{
	top: 24.95vw;
	left: 47.85vw;
}

/*--横線３--*/
.g12-line-yoko3{
	top:41.5vw;
	left:0vw;
}

/*--縞模様の大きさ(左)--*/
.g12 .box {
	width: 48.2%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g12 .box.active {
	opacity: 1;
}

/*--縞模様の位置(左)--*/
.g12 .position1{
	top: 34vw;
	left: 0;
}
/* 縞の色（ボックスの背景色）を指定 */
.g12 .bg-color {
	background-color: #f3d696;
}

/*--縞模様の大きさ（右）--*/
.g12 .box2 {
	width: 51.6%;
	height: 1.7vw;
	padding: 0.2vw;
}
.g12 .box2.active {
	opacity: 1;
}
/*--縞模様の位置（右）--*/
.g12 .position2{
	top: 23.2vw;
	left: 47.85vw;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G12--*/
/*--管理棟--*/
.g12-kanri {
	width: 15vw;
	top: 5.5vw;
	left: 1vw;	
}
.g12-kanri.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--ねじれ矢印--*/
.g12-arrow {
	width: 3vw;
	top: 16vw;
	left: 6vw;	
}
.g12-arrow.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--head（本社）--*/
.g12-head {
	width: 15vw;
	top: 23.5vw;
	left: 1vw;	
}
.g12-head.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--工程--*/
.g12-koutei {
	width: 10vw;
	top: 1vw;
	left: 23vw;	
}
.g12-koutei.active {
	transform: translateY(2vw);
	opacity: 0.7;
}

/*--生産（受発注）--*/
.g12-seisan {
	width: 11vw;
	top: 22vw;
	left: 22.5vw;	
}
.g12-seisan.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--分岐--*/
.g12-arrow2 {
	width: 20vw;
	top: 5.2vw;
	left: 19.5vw;	
}
.g12-arrow2.active {
	opacity: 1;
}

.g12-arrow2-90deg{
	display: none;
}



/*--顧客--*/
.g12-cus1, .g12-cus2, .g12-cus3, .g12-cus4 {
	width: 6vw;
}

.g12-cus5{
	width: 10vw;
}

.g12-cus1{
	top: 3.2vw;
	left: 41vw;	
}
.g12-cus2 {
	top: 11.4vw;
	left: 42.5vw;	
}
.g12-cus3 {
	top: 21.5vw;
	left: 42.5vw;	
}
.g12-cus4 {
	top: 28.1vw;
	left: 41vw;	
}
.g12-cus5 {
	top: 30vw;
	left: 67vw;	
}

.g12-cus.active {
	transform: translateX(-2vw);
	opacity: 1;	
}
.g12-cus5.active {
	transform: translateX(2vw);
	opacity: 1;	
}

/*--ネットワーク--*/
.g12-net {
	width: 30vw;
	top: 4.5vw;
	left: 50vw;	
}
.g12-net.active {
	transform: translateY(-2vw);
	opacity: 1;
}

.g12-desk {
	width: 8.5vw;
	top: 1.8vw;
	left: 85vw;	
}
.g12-desk.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--2拠点--*/
.g12-2points {
	width: 13vw;
	top: 30vw;
	left: 50vw;	
}
.g12-2points.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--色矢印1--*/
.g12-arrow3-1 {
	width: 3.5vw;
	top: 29.5vw;
	left: 63vw;	
}
.g12-arrow3-1.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--色矢印2--*/
.g12-arrow3-2 {
	width: 4.5vw;
	top: 35.5vw;
	left: 60vw;	
}
.g12-arrow3-2.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--四角形--*/
.g12-dots-line {
	width: 14vw;
	top: 29vw;
	left: 80vw;	
}
.g12-dots-line.active {
	transform: translateY(-2vw);
	opacity: 1;
}


/*--g12 span(文字)--*/
/*--亀岡工場 管理棟--*/
.g12-kame-kan {
	top: 3.5vw;
	left: 2.5vw;	
}
.g12-kame-kan.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--道修町 本社--*/
.g12-dosho-head {
	top: 21vw;
	left: 3.7vw;	
}
.g12-dosho-head.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--受注・生産・出荷--*/
.g12-jyu-sei {
	top: 17.52vw;
	left: 24.65vw;	
}
.g12-jyu-sei.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--取引先--*/
.g12-sei-han {
	top: 17.2vw;
	left: 41.5vw;	
}
.g12-sei-han.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--２拠点化--*/
.g12-2kyoten {
	top: 29.55vw;
	left: 83.9vw;	
}
.g12-2kyoten.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--重要な業務を--*/
.g12-impor {
	top: 32.4vw;
	left: 80.5vw;	
}
.g12-impor.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--効率化・生産性の向上--*/
.g12-kouritsu {
	top: 34.4vw;
	left: 85vw;	
}
.g12-kouritsu.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--大規模な災害時などの--*/
.g12-daikibo {
	top: 36vw;
	left: 80.5vw;	
}
.g12-daikibo.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--受注や問合せ、渉外対応--*/
.g12-ser {
	top: 39.3vw;
	left: 84.1vw;	
}
.g12-ser.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*-------------------------------------*/

/*--ゴール１３--*/
/*--G13文章--*/
/*--私たちが実践する「気象--*/
.g13-sec1{
	width: 46.5vw;
	top: 1vw;
	left: 1vw
}
.g13-sec1.active {
	opacity: 1;
}

/*--原材料の確保 ＝『サプライチェーンの根幹をより強固に』--*/
.g13-sec2{
	top: 26vw;
	left: 1vw
}
.g13-sec2.active {
	opacity: 1;
}

/*--垂直展開となる外国製造業者による--*/
.g13-sec3{
	width: 32vw;
	top: 28vw;
	left: 1vw
}
.g13-sec3.active {
	opacity: 1;
}

/*--世界規模で変化する資源情勢を視野に入れ、--*/
.g13-sec4{
	top: 1vw;
	left: 51vw
}
.g13-sec4.active {
	opacity: 1;
}

/*--事業活動による植物等--*/
.g13-sec5{
	width: 8vw;
	top: 16vw;
	left: 1.6vw
}
.g13-sec5.active {
	opacity: 1;
}

/*--屋上緑化、工場緑化で--*/
.g13-sec6{
	width: 8vw;
	top: 16vw;
	left: 38.2vw
}
.g13-sec6.active {
	opacity: 1;
}

/*--亀岡工場では既存の原料倉庫棟以外に--*/
.g13-sec7 {
	top: 26.5vw;
	left: 55.5vw;	
}	
.g13-sec7.active {
	opacity: 1;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G13--*/
/*--CO2排出--*/
.g13-co2-out {
	width: 10vw;
	top: 9.5vw;
	left: 1vw;	
}
.g13-co2-out.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--天秤--*/
.g13-ten {
	width: 25vw;
	top: 17vw;
	left: 11vw;	
}
.g13-ten.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--CO2吸収--*/
.g13-co2-in {
	width: 10vw;
	top: 6.2vw;
	left: 37vw;	
}
.g13-co2-in.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--商品倉庫棟--*/
.g13-shohin {
	width: 37vw;
	top: 30vw;
	left: 1vw;	
}
.g13-shohin.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--船--*/
.g13-ship {
	width: 12vw;
	top: 24.2vw;
	left: 35vw;	
}
.g13-ship.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--１.２原料倉庫棟--*/
.g13-1-2gen {
	width: 44vw;
	top: 7.2vw;
	left: 55vw;	
}
.g13-1-2gen.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--植物資源--*/
.g13-shigen {
	width: 10vw;
	top: 7vw;
	left: 76vw;	
}
.g13-shigen.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--地球--*/
.g13-earth {
	width: 9vw;
	top: 7.5vw;
	left: 89vw;	
}
.g13-earth.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--L型の線-*/
.g13-L-line {
	width: 45vw;
	top: 32.5vw;
	left: 51vw;	
}
.g13-L-line.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--干ばつ--*/
.g13-nature {
	width: 10.4vw;
	top: 34.5vw;
	left: 51vw;	
}
.g13-nature.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--原材料--*/
.g13-crude {
	width: 10.4vw;
	top: 34.5vw;
	left: 66vw;	
}
.g13-crude.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--製品--*/
.g13-prod {
	width: 10.4vw;
	top: 34.5vw;
	left: 83vw;	
}
.g13-prod.active {
	transform: translateY(-2vw);
	opacity: 1;
}


/*--g13 span(文字)--*/
/*--環境影響--*/
.g13-inf {
	top: 8.5vw;
	left: 12.8vw;	
}
.g13-inf.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--CO2の排出--*/
.g13-huka {
	top: 10.5vw;
	left: 12.3vw;	
}
.g13-huka.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--環境配慮--*/
.g13-effort {
	top: 5.5vw;
	left: 28.5vw;	
}
.g13-effort.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--事業活動による環境負荷　－　私たち--*/
.g13-mainasu {
	top: 21vw;
	left: 2.5vw;	
}
.g13-mainasu.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--環境的リスク：自然災害・パン--*/
.g13-3fac {
	top: 40vw;
	left: 34.5vw;	
}
.g13-3fac.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--万一の異常気象・不作--*/
.g13-husaku {
	top: 32.7vw;
	left: 51.8vw;	
}
.g13-husaku.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--複数年分の原材料を確保--*/
.g13-many {
	top: 41.2vw;
	left: 62.5vw;	
}
.g13-many.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--恒常的な生産--*/
.g13-kou {
	top: 41.2vw;
	left: 75.4vw;	
}
.g13-kou.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--安定供給・急激な価格変動の防止--*/
.g13-stable {
	top: 32.7vw;
	left: 82.5vw;	
}
.g13-stable.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--つくる責任--*/
.g13-resp {
	top: 41.2vw;
	left: 91.2vw;	
}
.g13-resp.active {
	transform: translateY(-2vw);
	opacity: 1;
}



/*--線(共通)--*/
.g13-line-yoko1,
.g13-line-yoko2,
.g13-line-tate1{
	position: absolute;
	z-index: 1;
}
/*--横線１--*/
.g13-line-yoko1{
	top:25.5vw;
	left:0vw;
	z-index: 1;
}

/*--横線２--*/
.g13-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--縦線１--*/
.g13-line-tate1{
	top: 0.1vw;
	left: 48.5vw;

}

/*--縞模様の大きさ--*/
.g13 .box {
	width: 1.25vw;
	height: 41vw;
	padding: 0.2vw;
}
.g13 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g13 .position1{
	top: 0.55vw;
	left: 48.5vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g13 .bg-color {
	background-color: #8bc28b;
}
/*-------------------------------------*/


/*--ゴール１７--*/
/*--G17文章--*/
/*--SDGsが掲げる１７の目標は--*/
.g17-sec1{
	width: 44vw;
	top: 1vw;
	left: 1vw
}
.g17-sec1.active {
	opacity: 1;
}

/*--単独で目標に取り組むだけでなく、--*/
.g17-sec2{
	width: 44vw;
	top: 9vw;
	left: 1vw
}
.g17-sec2.active {
	opacity: 1;
}

/*--複数の企業同士が他には無い互いの--*/
.g17-sec3{
	width: 44vw;
	top: 28vw;
	left: 1vw
}
.g17-sec3.active {
	opacity: 1;
}

/*-- 現状に基づいた私たちのSDGsモデル--*/
.g17-sec4{
	top: 1vw;
	left: 52vw
}
.g17-sec4.active {
	opacity: 1;
}

/*--「経済」の発展は、生活や教育などの--*/
.g17-sec5{
	width: 17vw;
	top: 4vw;
	left: 52vw
}
.g17-sec5.active {
	opacity: 1;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G17--*/
/*--１７人が手をつなぐ--*/
.g17-hand {
	width: 42vw;
	top: 19.2vw;
	left: 1vw;	
}
.g17-hand.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--G17 アイコン--*/
.g17-icon17 {
	width: 7vw;
	top: 9.7vw;
	left: 71.6vw;	
}
.g17-icon17.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--上の輪--*/
.g17-top {
	width: 11.8vw;
	top: 16.2vw;
	left: 69.3vw;	
}
.g17-top.active {
	transform: translateY(-5vw);
	opacity: 1;
}

/*--中央の輪--*/
.g17-middle {
	width: 19vw;
	top: 21.2vw;
	left: 65.65vw;	
}
.g17-middle.active {
	transform: translateY(-4vw);
	opacity: 1;
}

/*--下の輪--*/
.g17-bottom {
	width: 40vw;
	top: 28.2vw;
	left: 55vw;	
}
.g17-bottom.active {
	transform: translateY(-3vw);
	opacity: 1;
}


/*--G12 アイコン--*/
.g17-icon12 {
	width: 3vw;
	top: 17.4vw;
	left: 67vw;	
	border: solid 0.5px #fff;
}
.g17-icon12.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G3 アイコン--*/
.g17-icon3 {
	width: 3vw;
	top: 23.4vw;
	left: 58vw;		
}
.g17-icon3.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G8 アイコン--*/
.g17-icon8 {
	width: 3vw;
	top: 28.3vw;
	left: 58vw;		
}
.g17-icon8.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G5 アイコン--*/
.g17-icon5 {
	width: 3vw;
	top: 23.4vw;
	left: 91vw;	
}
.g17-icon5.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G4 アイコン--*/
.g17-icon4 {
	width: 3vw;
	top: 28.3vw;
	left: 91vw;		
}
.g17-icon4.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G7 アイコン--*/
.g17-icon7 {
	width: 3vw;
	top: 33.4vw;
	left: 54vw;			
}
.g17-icon7.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G9 アイコン--*/
.g17-icon9 {
	width: 3vw;
	top: 33.4vw;
	left: 93.5vw;			
}
.g17-icon9.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--G13 アイコン--*/
.g17-icon13 {
	width: 3vw;
	top: 38.9vw;
	left: 64vw;
	border: solid 0.5px #fff;
}
.g17-icon13.active {
	transform: translateY(-6vw);
	opacity: 1;
}

/*--握手する人--*/
.g17-shake {
	width: 10vw;
	top: 4vw;
	left: 83vw;	
}
.g17-shake.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--カラフルな横線--*/
.g17-color-bar {
	width: 100%;
	top: 41vw;
	left: 0;	
	z-index: 5;
}
.g17-color-bar.active {
	opacity: 1;
}

/*--g17 span(文字)--*/
/*--グローバルパートナーシップ--*/
.g17-partner {
	top: 26.2vw;
	left: 14.155vw;	
}
.g17-partner.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--商品開発（手をつなぐ画像の上）--*/
.g17-dev {
	top: 4vw;
	left: 78vw;	
}
.g17-dev.active {
	transform: translateX(5vw);
	opacity: 1;
}
/*--受託製造（手をつなぐ画像の上）--*/
.g17-out {
	top: 6vw;
	left: 93vw;	
}
.g17-out.active {
	transform: translateX(-5vw);
	opacity: 1;
}
/*--当社の原薬（手をつなぐ画像の上）--*/
.g17-resi {
	top: 8vw;
	left: 76vw;	
}
.g17-resi.active {
	transform: translateX(5vw);
	opacity: 1;
}
/*--持続可能な（手をつなぐ画像の上）--*/
.g17-mate {
	top: 10vw;
	left: 93vw;	
}
.g17-mate.active {
	transform: translateX(-5vw);
	opacity: 1;
}


/*--ゴールの内容--*/
/*--持続可能な生産供給体制--*/
.g17-g12 {
	top: 14.2vw;
	left: 71vw;	
}
.g17-g12.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--地域社会への貢献と--*/
.g17-g3 {
	top: 19.5vw;
	left: 62vw;	
}
.g17-g3.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--働きがいのある職場環境を--*/
.g17-g8 {
	top: 24.5vw;
	left: 62vw;	
}
.g17-g8.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--女性社員の積極的登用--*/
.g17-g5 {
	top: 19.5vw;
	left: 79vw;	
}
.g17-g5.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--未来を担う子どもたちが--*/
.g17-g4 {
	top: 24.5vw;
	left: 79vw;	
}
.g17-g4.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--持続可能な近代的エネルギーに--*/
.g17-g7 {
	top: 29.5vw;
	left: 58vw;	
}
.g17-g7.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--レジリエントな生産を可能とする基盤--*/
.g17-g9 {
	top: 29.5vw;
	left: 79vw;	
}
.g17-g9.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--気象変動を配慮した事業活動と--*/
.g17-g13 {
	top: 35.2vw;
	left: 68vw;	
}
.g17-g13.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--『経済』--*/
.g17-economy {
	top: 13.45vw;
	left: 53vw;
}
.g17-economy.active {
	opacity: 1;
}

/*--『社会』--*/
.g17-society {
	top: 20vw;
	left: 53vw;
}
.g17-society.active {
	opacity: 1;
}

/*--『環境』--*/
.g17-environment {
	top: 30.9vw;
	left: 53vw;
}
.g17-environment.active {
	opacity: 1;
}


/*--線(共通)--*/
.g17-line-yoko1,
.g17-line-yoko2,
.g17-line-yoko3,
.g17-line-yoko4,
.g17-line-yoko5,
.g17-line-tate1{
	position: absolute;
	z-index: 1;
}
/*--横線１--*/
.g17-line-yoko1{
	top:8vw;
	left:0vw;
	z-index: 1;
}

/*--横線２--*/
.g17-line-yoko2{
	top:41.5vw;
	left:0vw;
	z-index: 1;
}

/*--のびる横線３--*/
.g17-line-yoko3 {
	top: 15vw;
	left: 53vw;
	z-index: 1;
	transition: width 2s;
	height: 1.8px !important;
	width: 0;
	box-shadow: 0 0 12px white; /* 線の周囲に白い縁を付ける */
}
.g17-line-yoko3.active {
	width: 18%;
}

/*--のびる横線４--*/
.g17-line-yoko4 {
	top: 21.5vw;
	left: 53vw;
	z-index: 1;
	transition: width 2s;
	height: 1.8px !important;
	width: 0;
	box-shadow: 0 0 12px white; /* 線の周囲に白い縁を付ける */
}
	.g17-line-yoko4.active {
	width: 15%;
}

/*--のびる横線５--*/
.g17-line-yoko5 {
	top: 32.5vw;
	left: 53vw;
	z-index: 1;
	transition: width 2s;
	height: 1.8px !important;
	width: 0;
	box-shadow: 0 0 12px white; /* 線の周囲に白い縁を付ける */
}
	.g17-line-yoko5.active {
	width: 15%;
}
  


/*--縦線１--*/
.g17-line-tate1{
	top: 0.2vw;
	left: 47vw;
}

/*--縞模様の大きさ--*/
.g17 .box {
	width: 1.25vw;
	height: 41vw;
	padding: 0.2vw;
}
.g17 .box.active {
	opacity: 1;
}
/*--縞模様の位置--*/
.g17 .position1{
	top: 0.55vw;
	left: 47vw;
}
/* 縞の色（ボックスの背景色）を指定 */
.g17 .bg-color {
	background-color: #4178bb;
}
/*-------------------------------------*/



/*--ゴール１７--*/
/*--G17文章--*/
/*--亀岡工場の管理棟は--*/

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G17--*/
/*--管理棟--*/

/*--g17 span(文字)--*/
/*--亀岡工場 管理棟--*/
/*-------------------------------------*/

/*--ページ末尾の航空写真とSDGsロゴ付近の設定（PC用）--*/
.blank {
	/*border: solid 1px #230549;*/
	height: 10vh;
}

/*--部分的に背景が透過になっている。この背景の下に航空写真を表示させる--*/
.sky{
	/*border: solid 1px #ad8516;*/
	height: 73vh;
	/*background: linear-gradient(to bottom, rgba(255, 255, 255, 1)0%,rgba(255, 255, 255, 0)30%, rgba(213, 229, 245, 0)70%,rgb(255, 255, 255)100%), url("../images/sus/cloud.png");*/
	background: linear-gradient(to bottom, rgb(255, 255, 255)0%,rgba(255, 255, 255, 0)30%,rgba(213, 229, 245, 0)90%, rgb(255, 255, 255)100%);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
}

.kameoka-plant {
	position: relative;
	/*height: 180vh;　active.クラスを付与しない場合の適切な高さ*/
	height: 0;	/*--後続するSDGsロゴを早く表示するため高さを「0」とする。--*/ 
	background-color: #ffffff;
	/*border: solid 1px #b91f4d;*/
}

/*--航空写真が画面内に入ると上へ移動⇒.skyクラス要素の下で表示される--*/
.ka-plant{
	z-index: -5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: contain; /*--アスペクト比を保ちつつ表示--*/
	opacity: 0.3;
	transition: transform 3s ease, opacity 0.5s ease; /*--移動と不透明度の変化にトランジションを追加--*/
	/*transition: transform 3s ease 0.01s, opacity 0.5s ease 0.3s; /*--アニメーションの遅延を追加--*/
}

.ka-plant-portrait{
	display: none;
}

.ka-plant.active {
	transform: translateY(-140vh);
	opacity: 1;
}


.end{
	background-color: #ffffff;
	height: 100vh;
	text-align: center;
}

/*--マージンの色を疑似要素で指定して、見せたくない画像の動きを非表示にする
SDGsロゴの下に隙間ができることがある。（下から上に移動する航空写真がその隙間から見える）
そのため意図的な空白を設けたかった。paddingを用いると要素の高さが変わってしまう。--*/
.end::before {
	content: "";
	display: block;
	background-color: rgb(255, 255, 255, 0); /* マージンの色を設定 */
	height: 30vh; /* マージンのサイズを指定 */
	margin-bottom: 20px; /* マージンのサイズを指定 */
}

.logo-area{
	background-color: #ffffff;
	text-align: center;
	padding-top: 25vh;
	padding-bottom: 5vh;
}

/*--.SDGs-logoの高さ＝画面の高さ - .logo-areaの上部padding - .logo-areaの下部padding - フッターの高さ--*/
.SDGs-logo {
	max-height: 100vh;
	max-width: 90vw;
}

footer{
	display: flex;
	flex-direction: column;	/*--縦配置∺-*/
	align-items: center; /*-- 水平方向に中央揃え --*/
	justify-content: center; /*-- 垂直方向に中央揃え --*/

	height: 20vh;
	background-color: #333;
}

footer {
	font-family: 'Noto Serif JP', serif;
	font-size: 2vh;
	text-decoration: none;
	color: #fff;
}

footer img{
	width: 40vh; /*--社名ロゴ--*/
	padding: 6px;
}

footer a{
	text-decoration: none;
	font-size: 1.4vh;
	color: #fff;
}

footer .small{
	font-size: 1.4vh;
}

.effect {
	padding: 11px;
}
/*--ここまで。　ページ末尾の航空写真とSDGsロゴ付近の設定（PC用）--*/







.parallax01 {
  background-image: url(../images/sus/g3-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.parallax02 {
  background-image: url(../images/para-demo/p1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.parallax03 {
  background-image: url(../images/para-demo/ocean.jpg);
}

.parallax04 {
	background-image: url(../images/para-demo/p4.jpg);
}

.parallax05 {
	background-image: url(../images/para-demo/p5.jpg);
}

.parallax0 {
	background-image: url(../images/para-demo/p2.jpg);
}




/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	z-index: 99;
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5em;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 3vw;		/*幅*/
	line-height: 3vw;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*---------------------------------------------------------------------------
画面が「4:3」の小さな場合の指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) and (max-width:1290px) {
.contents {
	overflow-Y: hidden;	/*-- 横方向のスクロールバーを非表示にする --*/
	-webkit-overflow-scrolling: touch; /* iOS Safariでスクロールを滑らかに */
}

body{
	overflow-X: hidden;
}
	
.icon-container{
	opacity: 0;
}


/*--スマホ用のナビゲーションを表示--*/
#navArea {
	display: block;
}

.toggle_btn {
	top: 20px;
}

header .logo{
	/*width: calc(100vw/4);		/*--表示幅の指定--*/
	opacity: 0;
}

/*--縦方向に伸びる誘導線－後続するコンテンツへの誘導--*/
.scrollDown {
	height: 12vh;
}



/*--Scrollテキストの描写--*/
.scrolldown-mouse span {
	/*--描画位置--*/

	font-size: 1.3rem;
}


.top .kame{
	position: absolute;
	top: 85%;
}

#top-title{
	top: 42%;
}

p{
	font-size: 1.5vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	text-shadow:2px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF,  0-1px 0 #FFF,
	-1px 0 0 #FFF, 1px 0 0 #FFF;
}

/*--部分的に背景が透過になっている。この背景の下に航空写真を表示させる--*/
.sky{
	/*border: solid 1px #ad8516;*/
	height: 73vh;	/*--変化なし--*/
}


.ka-plant.active {
	transform: translateY(-110vh);	/*-- -140⇒-100にする--*/
	opacity: 1;
}

.SDGs-logo {
	max-height: 70vh;
}



.g9-line-yoko2{
	top: 19.5vh;
	left: 70%; /* 要素の左側を中心に配置 */
	width: 0;	/*--伸びる前の幅を指定します--*/
	height: 2px !important;
    transform: translateX(-57%); /* 中心揃え */
}
.g9-line-yoko2.active {
    width: 37%; /*--線が中心から左右に伸びる幅を指定します--*/
}

/*--縦線３（太）(タブレット・縦)--*/
.g9-line-tate3{
	top: 26vh;
	left: 60vw;
	width: 2px;
	transform: translateY(-70%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 3s;
	animation-name: expandHeight2; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

/*--縦線４（太）(タブレット・縦)--*/
.g9-line-tate4{
	top: 26vh;
	left: 72.8vw;
	width: 2px;
	transform: translateY(-70%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 3s;
	animation-name: expandHeight2; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

@keyframes expandHeight2 {
	from {
	  height: 0px; /* 開始時の高さ */
	}
	to {
	  height: 195px; /* 終了時の高さ */
	}
}
/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/


/*ボタンの設定*/
.pagetop a {
	font-size: 2.2em;	/*文字サイズ*/
	width: 5vw;		/*幅*/
	line-height: 5vw;	/*高さ*/
}

}


/*---------------------------------------------------------------------------
ここからタッチデバイスはハンバーガーメニューを表示
---------------------------------------------------------------------------*/
@media (hover: none) {

/*--スマホ用のナビゲーションを表示--*/
#navArea {
	display: block;
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
    
}

/*---------------------------------------------------------------------------
ここから下は画面が「縦長」の場合の追加指定(主としてスマートフォン、※タブレットの縦置きは別途記載)
---------------------------------------------------------------------------*/
@media screen and (orientation: portrait) {


/*--メインイメージを縦長向き端末用に準備した画像（bg_main_portrait.jpg）に入れ替える。--*/
html,body {
	margin: 0;padding: 0;
	font-size: 1.6vh;	/*--文字サイズは『縦方向』のビューポートに対してサイズを変更--*/
}

/*--スマホ、タブレットなど、縦長画面の文字設定--*/
p {
	font-size: 3.3vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	line-height: 7vw;
}

.larger{
	font-size: 3.5vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
	line-height: 8vw;
}

/*--スマホ、タブレットなど、縦長画面は配置を一新--*/
.ambi p br,
.kameoka p br,
.plant p br{
	/*--改行を無視--*/
	display: none;
}

header .logo{					/*--ページ上にある社名--*/
	display: block;				/*--ブロック要素--*/
	width: calc(55vw);			/*--表示幅の指定--*/
	position: absolute;			/*--画面左上を基点になる--*/
	top: 3%;					/*--画面上からの距離--*/
	left: 50%;					/*--中央寄せ--*/
	transform: translateX(-50%);/*--中央寄せ--*/
	position: fixed;			/*--要素を固定--*/
	/*z-index: -1;				/*--重なりの順序を指定--*/
}


.overlay-left img{
	position: absolute;
	width: 30vw;
	left: -10vw;
}

/*--亀岡市の地図が入る要素（これを親要素として点と文字を配置）--*/
.overlay-right{
	top: 5vw;
	left: 10vw;
	width: 31vw;
	height: 31vw;
}

.overlay-right img{
	width: 30vw;
}

/*--目印の大きさ：スマホは小さく*/
.point {
	width: 3px;
	height: 3px;
}

/*--亀岡工場（地図上の文字）：スマホ微調整必要--*/
.map-point-1{
	top: 29.5%;
	left: 13%;
	font-size: 2vw;
}
/*--本社（地図上の文字）：スマホ微調整必要--*/
.map-point-2{
	top: 44%;
	left: 50%;
	font-size: 2vw;
}

.map-point-1::before,
.map-point-2::before{
	display: none;
}

.top .kyo-kame{
	position: absolute;
	top: 30vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 4vw;
} 

.top .kame{
	position: absolute;
	top: 87vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 4vw;
}

.top .scrollDown {
	top: 40vh;
	width: 0.2vw;
}

/*--「マウスポインタ―」--*/
.scrolldown-mouse {
	display: none;
}



/*--SDGsアイコンの大きさを指定--*/
.icon-container img{
	width: 4vh;
	margin-bottom: 0.5vw;	/*スマホなど、折り返す表示に対して間隔を空ける*/
	padding-right: 0.5vh;
}

.icon-container {
	display: block;
	display: flex;
	width: 100vw;
	margin: auto 0;
}

#top-title{						/*--[事業の発展と持続可能な社会の両立]を入れるボックス要素--*/
	top: 50%;

}


/*縦長の画面ではこの間隔を広くしないと管理棟が完全に見えない。*/
.gutter {
	height: 180vh;
	/*border: solid 1px #4bc97b;*/
}

/*１番目の背景画像(固定ではない)*/
#aaa {
	background-image: url(../images/sus/bg_main_portrait_first.jpg);
	background-position: center bottom;	/*--背景画像の水平方向を中央に合わせ、垂直方向を底辺に合わせる--*/
	background-size: 100% auto; /*--背景画像の横幅をビューポートの幅に合わせ、縦幅は自動調整--*/
}

/*２番目の背景画像（固定）*/
.back-img-b::after {
	background-image: url(../images/sus/bg_main_portrait.jpg);
	background-position: center bottom;	/*--背景画像の水平方向を中央に合わせ、垂直方向を底辺に合わせる--*/
	background-size: 100% auto; /*--背景画像の横幅をビューポートの幅に合わせ、縦幅は自動調整--*/
}


.back-img-c::after {
	background: url(../images/csr/bg_main_portrait.jpg) no-repeat bottom right / cover;
}


.fixed-100vh {	/*--スマホでは background-attachment: fixed; が効かない--*/
	background-attachment: scroll !important; /*--「background-attachment: fixed;を解除--*/
	position: fixed;
	height: calc(var(--vh, 1vh) * 100);		/*--「?vh」の部分をJavaScriptを使って取得--*/

	width: 100%;
	z-index: -1;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.top-text{
	text-align: center;
	font-size: 2.25vh;	/*--文字サイズは『縦方向』のビューポートに対してサイズを変更--*/
}


/*--冒頭の内容が格納された親要素--*/
div .contents {
	z-index: 10;
	width: 100vw;
	margin-bottom: 0;
	/*border: solid #cf1b60 1px;*/	/*--確認用--*/
}

div.blessing,
div.ambi,
div.kameoka{
	margin-bottom: 10vh;
}


/*--自然の恵みを・・・が入っている枠（親要素）：子要素の文字<p>はJSでアニメーション付与、親要素の背景をクラスで定義--*/
div .blessing{
	position: relative;
	width: 100vw;
	overflow: hidden;
}


.blessing .leaf-l{display: none;}

.blessing .leaf-r{display: none;}

.blessing .leaf2{display: none;}

.blessing .leaf3{display: none;}

.blessing .flower{
	position: absolute;
	top: 25vw;
	left:0;
}

.blessing .chem{
	position: absolute;
	top: 33vw;
	left:0;
}

.blessing .crude{
	position: absolute;
	top: 36vw;
	left:0;
}

.ambi section{
	text-align: left;
	display: block;
	width: 30vw;		/*--表示幅を狭く--*/
	position: absolute;	/*--位置を再指定するため--*/
	top: 0;
	left: 3vw;			/*--位置を再指定--*/
}

/*--スマホ、タブレットなど、縦長画面は配置を一新--*/
/*--製品--*/
.ambi .comp1{
	width: 50vw;
	top:2vw;
	left:45vw;
	z-index: 1;
}
.ambi .comp1.active {
  transform: translateX(-2vw);
  opacity: 1;
}

/*--物流--*/
.ambi .comp2{
	width: 23vw;
	top:38vw;
	left:72vw;
	z-index: 2;
}
.ambi .comp2.active {
  transform: translateY(-3vw);
  opacity: 1;
}

/*--設備--*/
.ambi .comp4{
	width: 22vw;
	top:33vw;
	left: 35vw;
	z-index: 3;
}
.ambi .comp4.active {
  transform: translateX(3vw);
  opacity: 1;
}

/*--人材--*/
.ambi .comp3{
	width: 40vw;
	top:55vw;
	left:55vw;
	z-index: 4;
}
.ambi .comp3.active {
  transform: translateX(-3vw);
  opacity: 1;
}

/*--建物--*/
.ambi .comp6{
	width: 38vw;
	top:76vw;
	left:40vw;
	z-index: 5;
}
.ambi .comp6.active {
	transform: translateX(3vw);
	opacity: 1;
}

/*--ヤブラン--*/
.ambi .comp5{
	width: 35vw;
	top:98vw;
	left:60vw;
}
.ambi .comp5.active {
	transform: translateY(-3vw);
	opacity: 1;
}

/*--車いす--*/
.ambi .comp7{
	width: 18vw;
	top:100vw;
	left:35vw;
}
.ambi .comp7.active {
	transform: translateX(3vw);
	opacity: 1;
}


h2{
	padding: 1.2vw 0;
	margin-left: 4vw;
	font-size: 3.0vw;	/*--文字サイズは横方向のビューポートに対してサイズを変更--*/
}



/*--当社の生産拠点・亀岡市－--*/
div .kameoka {
	width: 100vw;
	/*border: solid 4px #b44894;*/
}

.kameoka-title{
	left: 1vw;
	width: 100vw;
}

/*--亀岡盆地--*/
.kameoka-box-warp .img-box8{
	top: 14vw;	/*--画像の包括枠img-box8～12全てに独自の位置を指定--*/
	left: 4vw;	/*--画像の包括枠img-box8～12全てに独自の位置を指定--*/
	width: 89vw;
	height: 35vw;
}


/*--当社が植物成分抽出事業を行う京都府亀岡市は--*/
/*--全ての配置を変更--*/
.kameoka .left-container{
	position: absolute;
	top: 47vw;
	left: 0;
	width: 45vw;
	padding: 3vw;
}

/*--市役所別館前--*/
.kameoka .img-box10{
	top: 58vw;
	left: 43vw;
	width: 50vw;
	height: 30vw;
}

/*--緊急時特別避難--*/
.kameoka .img-box11{
	top: 97vw;
	left: 52vw;
	width: 38vw;
	height: 36vw;
}

/*--KIRI no KO--*/
.kameoka .img-box12{
	top: 148vw;
	left: 2vw;
	width: 40vw;
	height: 22vw;
}

/*--SDGsパー―トナー認定証--*/
.kameoka .img-box9{
	top: 181vw;
	left: 2vw;
	width: 45vw;
	height: 29vw;
}

/*--私たちは、環境先進都市で豊かな緑に包まれ--*/
.kameoka .right-container{
	top: 140vw;
	right:5vw;
	width: 40vw;
	padding: 3vw;
	text-align: left;
}	

/*私たちの亀岡工場　持続可能な未来に向けた活動----------------------------------------------------*/
/*--スマホ、タブレットなど、縦長画面は配置を一新--*/
.plant .plant-title{
	right: 5vw;
	top: -3vw;
}

/*--亀岡工場では環境配慮型車両と太陽光発電システムの早期--*/
.plant .right-container{
	right: 5vw;
	top: 11vw;
	width: 35vw;
	text-align: left;
}

/*--プリウス--*/
.plant .img-box13{
	top: 4vw;
	left: 3vw;
	width: 36vw;
	height: 18vw;
}

/*--太陽光発電--*/
.plant .img-box14{
	top: 24vw;
	left: 20vw;
	width: 30vw;
	height: 24vw;
}

/*--デマンド監視装置--*/
.plant .img-box15{
	top: 50vw;
	left: 5vw;
	width: 24vw;
	height: 20vw;
}

/*--ガス地図--*/
.plant .img-box19{
	position: absolute;
	top: 74vw;
	left: 4vw;
	width: 48vw;
	height: 24vw;
}

.plant .left-container{
	left: 3vw;
	top: 110vw;
	width: 35vw;
}	

/*--ガス工事--*/
.plant .img-box17{
	top: 112vw;
	left: 54vw;
	width: 39vw;
	height: 27vw;
}

/*--ガスメーター--*/
.plant .img-box18{
	top: 143vw;
	left: 47vw;
	width: 30vw;
	height: 44vw;
}

/*--地中熱空調(図)--*/
.plant .img-box20{
	top: 190vw;
	left: 41vw;
	width: 52vw;
	height: 20vw;
}

/*--地中熱空調工事--*/
.plant .img-box21{
	top: 213vw;
	left: 50vw;
	width: 40vw;
	height: 24vw;
}

/*--屋上緑化--*/
.plant .img-box22{
	top: 240vw;
	left: 8vw;
	width: 53vw;
	height: 36vw;
}

.meta-panel span{
	top: 5%;
}

.hitoni{
	top: 15%;
	width:100vw;
	margin: 0 auto;
}

/*--SDGsパネル（メタセコイヤ前）を格納する親要素--*/
.g-panel {
	top: 5%;
	width: 90%;
	height: 70%;

}

.parallax-top-margin{
	height:15px !important;
}

/*--スマホ・タブレット（縦置き）--*/
/*--各ゴール内で共通的に使用する文字修飾など------------ここから---*/
/*--sectionの文字色とサイズ--*/
.each-g {
	font-size: 2.6vw;
}

.each-g section{
	line-height: 1.75;
}

/*--大きい文字--*/
.max-large span{
	font-size: 4vw !important;
}

/*--やや大きい文字--*/
.large span{
	font-size: 3vw !important;
}

/*--小さめの文字--*/
.small span{
	display: block;	/*--line-heightプロパティはブロックレベル要素に有効--*/
	font-size: 1.5vw !important;
	line-height: 1.5 !important;
}

/*--文字色の反転--*/
.reversal span {
	color: white !important;
	background-color: #969696 !important;
	padding: 0 0.3vw 0.12vw 0.3vw;
}
/*-------------------------------------*/


/*********************************************/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール３(スマートフォン・縦)--*/

/*--ゴール３文章(スマートフォン・縦)--*/
/*--堅実な事業の発展(スマートフォン・縦)--*/
.g3 section{
	width: 45vw;
	top: 2vw;
	left: 52vw;
}

/*--横線(スマートフォン・縦)--*/
.g3-line-yoko1{
	top:35vw;
	left:0vw;
	z-index: 1;
}

.g3-line-yoko2{
	display: none;
}

.g3-line-yoko3{
	display: none;
}

/*--縦線１--*/
.g3-line-tate1{
	display: none;
	background-color: #1b973a;
	z-index: 1;
}
/*--縦線２--*/
.g3-line-tate2{
	display: none;
	background-color: #1b973a;
	z-index: 1;
}

/*--縞模様の大きさ--*/
.g3 .box {
	display: none;
	padding: 0.2vw;
}

/*--gif画像--*/
/*--寄付(スマートフォン・縦)--*/
.g3-kihu{
	width: 45vw;
	top: 0vh;
	left: 1vw;
}
.g3-kihu.active {
  transform: translateX(2vw);
  opacity: 1;
}
/*--福祉(スマートフォン・縦)--*/
.g3-hukushi{
	width: 95vw;
	top: 23vh;
	left: 3vw;
}
.g3-hukushi.active {
  transform: translateY(-2vw);
  opacity: 1;
}
/*--スポーツ(スマートフォン・縦)--*/
.g3-sports{
	width: 95vw;
	top: 40vh;
	left: 3vw;
}
.g3-sports.active {
  transform: translateY(-2vw);
  opacity: 1;
}
/*--植樹・子ども(スマートフォン・縦)--*/
.g3-children{
	width: 60vw;
	top: 61vh;
	left: 4vw;
}
.g3-children.active {
  transform: translateX(2vw);
  opacity: 1;
}
/*--価値創出の背景--*/
.g3-value{
	width: 30vw; 
	top: 60vh;
	left: 65vw;
}
.g3-value.active {
  transform: translateY(-2vw);
  opacity: 1;
}


/*--g3 span(文字)(スマートフォン・縦)--*/
/*--保健衛生の向上と福祉の充実--*/
.g3-hoken{
	top: 21vh;
	left: 3vw;
}

/*--災害時における(スマートフォン・縦)--*/
.g3-saigai{
	top: 34vh;
	left: 53vw;
	text-align: left;
}

/*--京都亀岡ハーフマラソン(スマートフォン・縦)--*/
.g3-mara{
	top: 54vh;
	left: 3vw;
}

/*--亀岡運動公園野球場整備事業(スマートフォン・縦)--*/
.g3-undou{
	top: 54vh;
	left: 60vw;
}

/*--次世代を担う子ども(スマートフォン・縦)--*/
.g3-jisedai{
	top: 60vh;
	left: 9vw;
}

/*--心地よいまちづくり、心地よい環境のために--(スマートフォン・縦)*/
.g3-koko{
	top: 65vh;
	left: 9vw;
}

/*--企業としての新たな(スマートフォン・縦)--*/
.g3-kigyoutoshite{
	top: 62.8vh;
	left: 67vw;
}
.g3-kigyoutoshite.active {
	opacity: 1;
	transform: translateY(-2vw);
}
/*--価値創出(スマートフォン・縦)--*/
.g3-kachi{
	top: 65.47vh;
	left: 72vw;
}
.g3-kachi.active {
	opacity: 1;
	transform: translateY(-2vw);
}
/*--収益を介した(スマートフォン・縦)--*/
.g3-sankaku{
	top: 69.5vh;
	left: 70vw;
}
.g3-sankaku.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*-------------------------------------*/


/*********************************************/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール４(スマートフォン・縦)--*/

/*--ゴール４文章--*/
/*--私たちの生産拠点のある--*/
.g4 .sec1{
	width: 95vw;
	top: 1vh;
	left: 2.5vw;
}

/*--亀岡工場では人にやさしい(スマートフォン・縦)--*/
.g4 .sec2{
	width: 95vw;
	top: 30vh;
	left: 2.5vw;
}

/*--事業の節目を記念して(スマートフォン・縦)--*/
.g4 .sec3{
	top: 38vh;
	left: 2.5vw;
}

/*--亀岡市の子育て支援の(スマートフォン・縦)--*/
.g4 .sec4{
	width: 26vw;
	top: 43vh;
	left: 2.5vw;
}

/*--輝かしい未来を担う(スマートフォン・縦)--*/
.g4 .sec5{
	width: 37vw;
	top: 43vh;
	left: 58vw;
}

/*--天候を気にせず遊べる未就学児向け(スマートフォン・縦)--*/
.g4 .sec6{
	width: 35vw;
	top: 64.5vh;
	left: 26.5vw;
}



/*--横線１--*/
.g4-line-yoko1{
	display: none;
}

/*--横線２(スマートフォン・縦)--*/
.g4-line-yoko2{
	display: none;
}

/*--横線３(スマートフォン・縦)--*/
.g4-line-yoko3{
	top: 10.2vh;
}

/*--縦線１(スマートフォン・縦)--*/
.g4-line-tate1{
	display: none;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g4 .box {
	display: none;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g4 .box2 {
	display: none;
}



/*--gif画像--*/
/*--子ども(スマートフォン・縦)--*/
.g4-children {
	width: 28vw;
	top: 11vh;
	left: 25vw;	
}

/*--kirinoko1(スマートフォン・縦)--*/
.g4-kirinoko1 {
	width: 58vw;
	top: 16vh;
	left: 0.3vw;	
}

/*--kirinoko2(スマートフォン・縦)--*/
.g4-kirinoko2 {
	width: 40vw;
	top: 12.5vh;
	left: 55vw;	
}

/*--気球（人だけ）(スマートフォン・縦)--*/
.g4-kikyuu1 {
	width: 40vw;
	top: 54vh;
	left: 2vw;	
}

/*--気球だけ(スマートフォン・縦)--*/
.g4-kikyuu2 {
	width: 22vw;
	top: 42.5vh;
	left: 30vw;	
}

/*--サイエンスフェスタ(スマートフォン・縦)--*/
.g4-sci {
	width: 37vw;
	top: 49vh;
	left: 55vw;	
}

/*--遊具１（まわるやつ）(スマートフォン・縦)--*/
.g4-yuugu1 {
	width: 22vw;
	top: 63vh;
	left: 2vw;	
}

/*--遊具２（マット）(スマートフォン・縦)--*/
.g4-yuugu2 {
	width: 22vw;
	top: 69vh;
	left: 18vw;	
}

/*--かめまるらんど(スマートフォン・縦)--*/
.g4-kamemaru {
	width: 45vw;
	top: 63vh;
	left: 50vw;	
}


/*--g4 span(文字)(スマートフォン・縦)--*/
/*--KIRIN no KO--*/
.g4-kosodate {
	top: 50vw;
	left: 60vw;
}
.g4-kosodate.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--熱気球体験フライト(スマートフォン・縦)--*/
.g4-bal {
	top: 41.5vh;
	left: 3vw;
}

/*--サイエンスフェスタ（タイトル）(スマートフォン・縦)--*/
.g4-fes {
	top: 41.5vh;
	left: 58.5vw;
}

/*--こどものあそびひろば（タイトル）(スマートフォン・縦)--*/
.g4-play {
	top: 63vh;
	left: 26.3vw;
}
.g4-play.active {
	transform: scale(1.1);
	opacity: 1;
}
/*-------------------------------------*/


/*********************************************/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール５(スマートフォン・縦)--*/
/*--横線--*/
.g5-1-line-yoko1{
  top:41vw;
  left:0vw;
  z-index: 1;
}

/*--横線２--*/
.g5-1-line-yoko2{
	display: none;
}

/*--縦線１--*/
.g5-1-line-tate1{
	display: none;
}

/*--縞模様の大きさ--*/
.g5-1 .box {
	display: none;
}

/*--gif画像--*/
/*--人々(スマートフォン・縦)--*/
.g5-1-people{
  width: 85vw;
  top: 2vw;
  left: 6vw;
}

/*--矢印(スマートフォン・縦)--*/
.g5-1-arrow{
	width: 8vw;
	top: 25.8vh;
	left: 46vw;
}

/*--bbq(スマートフォン・縦)--*/
.g5-1-bbq{
	width: 30vw;
	top: 22vh;
	left: 63vw;
}

/*--G5円グラフ(スマートフォン・縦)--*/
.g5-1-graph{
  width: 75vw;
  top: 40.5vh;
  left: 12vw;
}

/*--階段(スマートフォン・縦)--*/
.g5-1-step{
  width: 90vw;
  top: 62vh;
  left: 3vw;
}


/*--ゴール５文章(スマートフォン・縦)--*/
.g5-1 .sec1{
	width: 95vw;
	top: 1.1vh;
	left: 2vw;
}


/*--背景色のある四角形(スマートフォン・縦)--*/
.g5-1 .square1{
	width: 40vw;
	height: 15vh;
	padding: 1vw;
	font-size:x-small;
}

.g5-1 .sq-position1 {
	top: 22vh;
	left: 5vw;
}

.g5-1 .square2{
	width:35vw;
	height:15vh;
	padding: 1vw;
	font-size:x-small;
}

.g5-1 .sq-position2 {
	top: 22vh;
	left: 60vw;
}

/*--就労は、単に収入を得る(スマートフォン・縦)--*/
.g5-1 .sec4 {
	width: 30vw;
	top: 30vh;
	left: 62.5vw;
	font-size:xx-small;
}

/*--男女雇用機会均等法が(スマートフォン・縦)--*/
.g5-1 .sec2 {
	width: 24vw;
	top: 68vh;
	left: 7vw;
	font-size: 3% !important;
}

/*--亀岡工場での統計においては、(スマートフォン・縦)--*/
.g5-1 .sec3 {
	width: 24vw;
	top: 65vh;
	left: 68.5vw;
	font-size: x-large;
}



/*--g5 span(文字)(スマートフォン・縦)--*/
/*--亀岡工場の(スマートフォン・縦)---*/
.g5-1-koujyouno{
	top: 39.2vh;
	left: 43.9vw;
}

/*--女性の割合(スマートフォン・縦)---*/
.g5-1-ratio{
	top: 42.2vh;
	left: 39.5vw;
}

/*--約8%--(スマートフォン・縦)*/
.g5-1-8{
	top: 52vh;
	left: 22.5vw;
}

/*--2002年--(スマートフォン・縦)*/
.g5-1-2002{
	top: 59vh;
	left: 20vw;
}

/*--約20%--(スマートフォン・縦)*/
.g5-1-20{
	top: 52vh;
	left: 66.4vw;
}

/*--現在（2023）--(スマートフォン・縦)*/
.g5-1-gen{
	top: 59vh;
	left: 69.5vw;
}


/*--子育て期の(スマートフォン・縦)---*/
.g5-1-kosodate{
	width: 20vw;
	top: 63vh;
	left: 6vw;
}

/*--働く女性の(スマートフォン・縦)---*/
.g5-1-hataraku{
	width: 24vw;
	top: 73.5vh;
	left: 69.5vw;
}
/*********************************************/



/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール５(スマートフォン・縦)--*/

/*--縞模様１、２、３(スマートフォン・縦)--*/
.g5-2 .box,
.g5-2 .box2,
.g5-2 .box3 {
	display: none;
}

/*--線--(スマートフォン・縦)*/
.g5-2-line-yoko1,
.g5-2-line-yoko3,
.g5-2-line-tate1,
.g5-2-line-tate2{
	position: absolute;
	display: none;
}

/*--横線２--(スマートフォン・縦)*/
.g5-2-line-yoko2{
	top: 8vh;
	left:0vw;
}

/*--ゴール５-２文章--*/
/*--働く女性は(スマートフォン・縦)--*/
.g5-2 section{
	width: 95vw;
	padding: 1vw;
	top: 0;
	left: 2vw;
}

/*--背景色のある四角形(スマートフォン・縦)--*/
.g5-2 .square1{
	width: 52vw;
	height: 7vh;
	padding: 1vw;
}
.g5-2 .sq-position1 {
	top: 11.3vh;
	left: 5.5vw;
}

.g5-2 .square2{
	width: 15vw;
	height:14.2vw;
	padding: 1vw;
}
.g5-2 .sq-position2{
	top: 24vh;
	left: 66vw;
}


/*--g5-2 span(文字)--*/
/*--気分が優れない(スマートフォン・縦)--*/
.g5-2-kibunga {
	top: 20vh;
	left: 9.5vw;
}

/*--30～50代の女性(スマートフォン・縦)--*/
.g5-2-30-50 {
	top: 9vh;
	left: 20vw;
}

/*--93%(スマートフォン・縦)--*/
.g5-2-93 {
	width: 40vw;
	top: 32.5vh;
	left: 12.5vw;
	text-shadow:2px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF,  0-1px 0 #FFF,
	-1px 0 0 #FFF, 1px 0 0 #FFF;
}


/*--29～49歳(スマートフォン・縦)--*/
.g5-2-29-49 {
	top: 9vh;
	left: 62vw;
}


/*--約８割は(スマートフォン・縦)--*/
.g5-2-8wari {
	display: none;
	top: 20vh;
	left: 65vw;
}

/*--女性特有の(スマートフォン・縦)--*/
.g5-2-tokuyuu {
	top: 40.5vh;
	left: 28.5vw;
}

/*--女性向けの漢方処方(スマートフォン・縦)--*/
.g5-2-kampo {
	top: 58vh;
	left: 32vw;
}

/*--生理痛、イライラ、ホットフラッシュ(スマートフォン・縦)--*/
.g5-2-nayami {
	top: 62.5vh;
	left: 4vw;
}

/*--漢方処方(スマートフォン・縦)--*/
.g5-2-syohou {
	display: none;
	top: 62.5vh;
	left: 47vw;
}



/*--gif画像--*/
/*--G5-2棒グラフ(スマートフォン・縦)--*/
.g5-2-graph{
	width: 27vw;
	top: 19.5vh;
	left: 23vw;
}

/*--３人(スマートフォン・縦)--*/
.g5-2-3per{
	width: 28vw;
	top: 30.2vh;
	left: 18vw;
}
.g5-2-3per.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--２人(スマートフォン・縦)--*/
.g5-2-2per{
  width: 23vw;
  top: 13.2vh;
  left: 62vw;
}
.g5-2-2per.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--生薬(スマートフォン・縦)--*/
.g5-2-crude{
	width: 60vw;
	top: 48.5vh;
	left: 20vw;
}

/*--矢印(スマートフォン・縦)--*/
.g5-2-arrow{
	width: 11vw;
	top: 62.2vh;
	left: 28vw;
}

/*--fight(スマートフォン・縦)--*/
.g5-2-fight{
	width: 8vw;
	top: 68.5vh;
	left: 77vw;
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール７－１(スマートフォン・縦)--*/
.g7-1-line-tate1,
.g7-1-line-yoko1{
	display: none;
}

/*--横線３(スマートフォン・縦)--*/
.g7-1-line-yoko2{
	top: 38vh;
	left:0vw;
	z-index: 1;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g7-1 .box {
	display: none;
}


/*--ゴール７-１文章(スマートフォン・縦)--*/
/*--早い段階での--*/
.g7-1 .sec1 {
	width: 94.5vw;
	top: 0.5vh;
	left: 2vw;
}


/*--工場の熱源となるエネルギー源を--*/
.g7-1 .sec2 {
	width: 95vw;
	top: 39vh;
	left: 3.5vw;
}


/*--地球温暖化の歯止め担うことは、--*/
.g7-1 .sec3 {
	width: 50vw;
	top: 63vh;
	left: 3vw;
}



/*--gif画像--*/
/*--寄付(スマートフォン・縦)--*/
/*--NOx(スマートフォン・縦)--*/
.g7-1-nox{
	width: 37vw;
	top: 7vh;
	left: 1vw;
}
.g7-1-nox.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--co2(雲)(スマートフォン・縦)--*/
.g7-1-co2{
	width: 44vw;
	top: 43.5vh;
	left: 52vw;
}
.g7-1-co2.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--原料生薬(スマートフォン・縦)--*/
.g7-1-crude{
	width: 38vw;
	top: 63vh;
	left: 57vw;
}
.g7-1-crude.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--ガスメーター(スマートフォン・縦)--*/
.g7-1-gas{
	width: 50vw;
	top: 46vh;
	left: 2vw;
}
.g7-1-gas.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--画面右側の森林(スマートフォン・縦)--*/
.g7-1-forest{
	width: 30vw;
	top: 63vh;
	left: 67vw;
}
.g7-1-forest.active {
	transform: translateX(-2vw);
	opacity: 0.2;
}

/*-- 車(スマートフォン・縦)--*/
.g7-1-car1 {
	width: 85vw;
	top: 20.5vh;
	left: 2vw;
}

.g7-1-car2 {
	width: 38vw;
	top: 17.5vh;
	left: 50vw;
}


.g7-1-car3 {
	width: 35vw;
	top: 8vh;
	left: 58vw;
}
.g7-1-car3.active {
	transform: translateX(2vw);
	opacity: 0.3;
}


/*--g7-1 span(文字)(スマートフォン・縦)--*/
/*--窒素酸化物--*/
.g7-1-osen {
	top: 13vh;
	left: 39vw;
}
.g7-1-osen.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--排出削減（左）(スマートフォン・縦)--*/
.g7-1-sakugen1 {
	top: 7vh;
	left: 11vw;
}
.g7-1-sakugen1.active {
	transform: translateY(-2vw);
	opacity: 1;
	z-index: 1;
}

/*--排出削減（右）(スマートフォン・縦)--*/
.g7-1-sakugen2 {
	top: 58vh;
	left: 67.2vw;
}
.g7-1-sakugen2.active {
	transform: translateY(2vw);
	opacity: 1;
	z-index: 1;
}

/*--ガスco2(スマートフォン・縦)--*/
.g7-1-gas-co2 {
	top: 48.5vh;
	left: 33.9vw;
}
.g7-1-gas-co2.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--約25%(スマートフォン・縦)--*/
.g7-1-25 {
	top: 51vh;
	left: 33vw;
}
.g7-1-25.active {
	transform: scale(1.1);
	opacity: 1;
}

/*--削減3(スマートフォン・縦)--*/
.g7-1-sakugen3 {
	top: 54vh;
	left: 35.7vw;
}
.g7-1-sakugen3.active {
	transform: scale(1.1);
	opacity: 1;
}
/*********************************************/



/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール７－２(スマートフォン・縦)--*/

/*--ゴール７-２文章--*/
/*--堅実な事業の発展(スマートフォン・縦)--*/
/*--東日本大震災--*/
.g7-2 .sec1 {
	width: 94.5vw;
	top: 1vh;
	left: 2vw;
}

/*--亀岡工場では(スマートフォン・縦)--*/
.g7-2 .sec2 {
	width: 17vw;
	top: 8.5vh;
	left: 76vw;
}

/*--工場全域に芝生緑化(スマートフォン・縦)--*/
.g7-2 .sec3 {
	width: 94.5vw;
	top: 27vh;
	left: 2vw;
}

/*--環境緑化への取組み －(スマートフォン・縦)--*/
.g7-2 .sec4 {
	width: 34vw;
	top: 35vh;
	left: 61vw;
}

/*--私たちは、(スマートフォン・縦)--*/
.g7-2 .sec5 {
	width: 50vw;
	top: 71.5vh;
	left: 46vw;
}
.g7-2 .sec5.active {
	transform: translateY(-2vw);
	opacity: 1;
}


.g7-2-line-yoko2,
.g7-2-line-tate1{
	display: none
}

/*--横線(スマートフォン・縦)--*/
/*--横線２(スマートフォン・縦)--*/
.g7-2-line-yoko1{
	top: 26vh;
	left:0vw;
	z-index: 1;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g7-2 .box {
	display: none;
}


/*--gif画像--*/
/*--ピーク(スマートフォン・縦)--*/
/*--G7-2--*/
.g7-2-peak{
	width: 70vw;
	top: 3.5vh;
	left: 1.5vw;
}

/*--屋上温度グラフ(スマートフォン・縦)--*/
.g7-2-graph{
	width: 46vw;
	top: 46.5vh;
	left: 49vw;
}

/*--管理棟(PC用(スマートフォン・縦))--*/
.g7-2-kanri{
	display: none !important;
}
/*--管理棟(スマートフォン・縦)--*/
.g7-2-kanri-2{
	width: 45vw;
	top: 56.5vh;
	left: 0.5vw;
}
.g7-2-kanri-2.active {
	transform: translateY(-2vw);
	opacity: 1;
}


/*--屋上緑化(スマートフォン・縦)-*/
.g7-2-yane{
	width: 53vw;
	top: 63.5vh;
	left: 45vw;
}

/*--集い（家族）(スマートフォン・縦)--*/
.g7-2-tsudoi{
	width: 35vw;
	top: 45vh;
	left: 5vw;
}

/*--桜と銀杏の枝(スマートフォン・縦)--*/
.g7-2-green{
	width: 29vw;
	top: 34vh;
	left: 28vw;
}

/*--御堂筋(スマートフォン・縦)--*/
.g7-2-namiki{
	width: 55vw;
	top: 36vh;
	left: 2vw;
}



/*--g7-2 span(文字)--*/
/*--集中可動(スマートフォン・縦)--*/
.g7-2-syu {
	top: 7vh;
	left: 11.8vw;
}

/*--分散可動(スマートフォン・縦)--*/
.g7-2-bun {
	top: 7vh;
	left: 44.3vw;
}

/*--23%(スマートフォン・縦)--*/
.g7-2-23 {
	top: 19vh;
	left: 28.5vw;
}

/*--45%(スマートフォン・縦)--*/
.g7-2-45 {
	top: 19vh;
	left: 45vw;
}

/*--ピークカット(スマートフォン・縦)--*/
.g7-2-cut {
	top: 11vh;
	left: 59vw;
}

/*--45.9%(スマートフォン・縦)--*/
.g7-2-max45 {
	top: 12.5vh;
	left: 58vw;
}

/*--ピークシフト(スマートフォン・縦)--*/
.g7-2-shift {
	top: 18.5vh;
	left: 59vw;
}
.g7-2-shift.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--夏季日中屋上温度(スマートフォン・縦)--*/
.g7-2-summer {
	top: 46.4vh;
	left: 53vw;
}
.g7-2-summer.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--最大約60℃(スマートフォン・縦)--*/
.g7-2-max60 {
	top: 46.4vh;
	left: 76vw;
}

/*--最大約30℃(スマートフォン・縦)--*/
.g7-2-max30 {
	top: 53vh;
	left: 76vw;
}

/*--約３０℃低(スマートフォン・縦)--*/
.g7-2-30 {
	top: 32.7vh;
	left: 6.1vw;
}

/*--緑化なし(スマートフォン・縦)--*/
.g7-2-false {
	top: 61.4vh;
	left: 51.6vw;
}

/*--緑化あり(スマートフォン・縦)--*/
.g7-2-true {
	top: 61.3vh;
	left: 69.3vw;
}

/*--雨水循環(スマートフォン・縦)--*/
.g7-2-usui {
	top: 56.1vh;
	left: 7vw;
}


/*--ヒートアイランド(スマートフォン・縦)--*/
.g7-2-heat {
	top: 61vh;
	left: 7vw;
}

/*--緑化土壌による断熱と蒸散(スマートフォン・縦)--*/
.g7-2-dojo {
	top: 64vh;
	left: 57vw;
}

/*--夏季：２～３℃低(スマートフォン・縦)--*/
.g7-2-2-3 {
	top: 65.5vh;
	left: 61.5vw;
}

/*--冬季：１～２℃高(スマートフォン・縦)--*/
.g7-2-1-2 {
	top: 66.5vh;
	left: 61.5vw;
}

/*--冷暖房エネルギーの削減(スマートフォン・縦)--*/
.g7-2-reidan {
	top: 67.5vh;
	left: 63vw;
}
.g7-2-reidan.active {
	transform: translateY(-2vw);
	opacity: 1;
}
/*********************************************/

/*-------------------------------------*/
/*--ゴール７－３(スマートフォン・縦)--*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--再生可能エネルギーを有効活用し--*/

/*--横線１(スマートフォン・縦)--*/
.g7-3-line-tate1{
	display: none;
}

/*--横線１(スマートフォン・縦)--*/
.g7-3-line-yoko1{
	top: 39.5vh;
	left: 0vw;
	z-index: 1;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g7-3 .box {
	display: none
}

/*--ゴール７-３文章--*/
/*--亀岡工場の管理棟と研究棟に、(スマートフォン・縦)--*/
.g7-3 .sec1 {
	width: 98vw;
	top: 0.5vh;
	left: 1.5vw;
}


/*--導入後の実績に基づいた(スマートフォン・縦)--*/
.g7-3 .sec2 {
	width: 10vw;
	top: 18.5vh;
	left: 50vw;
}


/*--亀岡工場の銀杏は５０本、(スマートフォン・縦)--*/
.g7-3 .sec3 {
	width: 10vw;
	top: 29vh;
	left: 50vw;
}


/*--研究棟の太陽光発電は(スマートフォン・縦)--*/
.g7-3 .sec4 {
	width: 95vw;
	top: 40vh;
	left: 1.5vw;
}


/*--導入後の実績に基づいた(スマートフォン・縦)--*/
.g7-3 .sec5 {
	width: 20vw;	
	top: 64vh;
	left: 4vw;
}


/*--「エネルギーをみんなにそしてクリーンに」(スマートフォン・縦)--*/
.g7-3 .sec6 {
	width: 95vw;
	top: 74vh;
	left: 2.5vw;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--gif画像--*/
/*--地中熱空調(スマートフォン・縦)--*/
.g7-3-hyb{
	width: 70vw;
	top: 9vh;
	left: 1.5vw;
}


/*--工場全体(スマートフォン・縦)--*/
.g7-3-plant{
	width: 36vw;
	top: 26vh;
	left: 5vw;
}

/*--カッコ線(スマートフォン・縦)--*/
.g7-3-line{
	width: 6vw;
	top: 17.5vh;
	left: 60vw;
}

/*--銀杏(スマートフォン・縦)--*/
.g7-3-gink{
	width: 30vw;
	top: 10.5vh;
	left: 68vw;
}

/*--森林(スマートフォン・縦)--*/
.g7-3-forest{
	width: 30vw;
	top: 48.5vh;
	left: 1vw;
}

/*--パネル(スマートフォン・縦)--*/
.g7-3-panel{
	width: 38vw;
	top: 55vh;
	left: 27vw;
}

/*--ポリタンク(スマートフォン・縦)--*/
.g7-3-tank{
	width: 30vw;
	top: 45vh;
	left: 65vw;
}

/*--上呂(スマートフォン・縦)--*/
.g7-3-jyo{
	width: 23vw;
	top: 49vh;
	left: 31vw;
}


/*--チューブ（ポリタンクの）(スマートフォン・縦)--*/
.g7-3-tube{
	width: 15vw;
	top: 47vh;
	left: 48vw;
}

/*--電源コード(スマートフォン・縦)--*/
.g7-3-code{
	width: 30vw;
	top: 66vh;
	left: 28vw;
}


/*--研究棟(スマートフォン・縦)--*/
.g7-3-labo{
	width: 35vw;
	top: 63vh;
	left: 62vw;
}

/*--ストライプ文字背景（上）(スマートフォン・縦)--*/
.g7-3 .position1 {
	width: 33vw;
	top: 47.4vh;
	left: 0.2vw;
}

/*--ストライプ文字背景（下）(スマートフォン・縦)--*/
.g7-3 .position2 {
	width: 32vw;
	top: 52vh;
	left: 60vw;
}


/*--g7-3 span(文字)(スマートフォン・縦)--*/
/*--地中熱空調--*/
.g7-3-chityuu {
	top: 16vh;
	left: 9.2vw;
}

/*--銀杏５０(スマートフォン・縦)--*/
.g7-3-tree50 {
	top: 24.5vh;
	left: 6.5vw;
}

/*--３ＭＴＣＯ２(スマートフォン・縦)--*/
.g7-3-3co2 {
	top: 26vh;
	left: 7.3vw;
}

/*--３６ＭＴ/年 ＣＯ2(スマートフォン・縦)--*/
.g7-3-36co2 {
	top: 19vh;
	left: 6vw;
}


/*--銀杏６００本(スマートフォン・縦)--*/
.g7-3-600 {
	top: 19vh;
	left: 74.5vw;
}

/*--森林換算(スマートフォン・縦)--*/
.g7-3-conv1 {
	width: 28vw;
	top: 46.9vh;
	left: 3vw;
}

/*--１８Lポリタンク(スマートフォン・縦)--*/
.g7-3-18L {
	top: 45vh;
	left: 80.2vw;
}


/*--石油換算(スマートフォン・縦)--*/
.g7-3-conv2 {
	top: 52vh;
	left: 62.2vw;
}


/*--太陽光発電(スマートフォン・縦)--*/
.g7-3-sun {
	top: 63.5vh;
	left: 63.5vw;
}

/*--７ＭＴ/年 ＣＯ2(スマートフォン・縦)--*/
.g7-3-7co2 {
	top: 66.5vh;
	left: 62vw;
}
/*********************************************/


/*-------------------------------------*/
/*--ゴール７－４(スマートフォン・縦)--*/
/*--縦方向はvhを横方向はvwを用いる--*/

/*--ゴール７-４文章--*/
/*--より濃いエキスでCO2排出削減--*/
.g7-4-sec1 {
	top: 1vw;
	left: 2vw;
}
.g7-4-sec1.active {
	opacity: 1;
}

/*--例えば、ドリンク剤に使用される原料(スマートフォン・縦)--*/
.g7-4-sec2 {
	width: 55vw;
	top: 1vh;
	left: 42vw;
}


/*--例１.(スマートフォン・縦)--*/
.g7-4-sec3 {
	top: 6vh;
	left: 65vw;
	transform: scale(1.5) !important;	
}

/*--例２.(スマートフォン・縦)--*/
.g7-4-sec4 {
	top: 11vh;
	left: 65vw;
	transform: scale(1.5) !important;	
}

/*--原料生薬１００ｋｇを、同一の抽出溶媒 ＋ 同一の抽出方法に(スマートフォン・縦)--*/
.g7-4-sec5 {
	width: 95vw;
	top: 16vh;
	left: 2vw;
}

/*--対応比は当社の標準製造法に基づくエキス収率(スマートフォン・縦)--*/
.g7-4-sec6 {
	top: 19vh;
	left: 45vw;
	transform: scale(1.5) !important;	
}


/*--横線１(スマートフォン・縦)--*/
.g7-4-line-yoko1{
	top: 30vw;
	left: 0vw;
	z-index: 1;
}

/*--縦線１(スマートフォン・縦)--*/
.g7-4-line-tate1{
	display: none;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g7-4 .box {
	display: none;
}


/*--gif画像--*/
/*--CO2(スマートフォン・縦)--*/
.g7-4-co2{
	width: 30vw;
	top: 2vh;
	left: 5vw;
}

/*--測り(スマートフォン・縦)--*/
.g7-4-w-scale{
	width: 15vw;
	top: 8vh;
	left: 80vw;
}

/*--コウジン(スマートフォン・縦)--*/
.g7-4-koujin{
	width: 9vw;
	top: 10vh;
	left: 40vw;
}
.g7-4-koujin.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--ボタンピ(スマートフォン・縦)--*/
.g7-4-botanpi{
	width: 9vw;
	top: 12vh;
	left: 55vw;
}
.g7-4-botanpi.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--↓の矢印(左)(スマートフォン・縦)--*/
.g7-4-ar1-position1{
	width: 3vw;
	top: 25.8vh;
	left: 32.5vw;
	transform: rotate(-90deg);
}
.g7-4-ar1-position1.active {
	transform: rotate(-90deg) !important;
	transform: translateY(1vw);
	opacity: 1;
}

/*--↓の矢印(右)(スマートフォン・縦)--*/
.g7-4-ar1-position2{
	width: 3vw;
	top: 25.8vh;
	left: 65vw;
	transform: rotate(-90deg);
}
.g7-4-ar1-position2.active {
	transform: rotate(-90deg) !important;
	transform: translateY(1vw);
	opacity: 1;
}


/*--抽出〇(スマートフォン・縦)--*/
.g7-4-ext2{
	width: 25vw;
	top: 20vh;
	left: 4.2vw;
}
.g7-4-ext2.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--横の太い縞矢印(左)(スマートフォン・縦)--*/
.g7-4-ar2-position1{
	width: 25vw;
	top: 32vh;
	left: 4.3vw;
	transform: rotate(90deg);
}
.g7-4-ar2-position1.active {
	transform: rotate(90deg);
	opacity: 1;
}

/*--流エキス(スマートフォン・縦)--*/
.g7-4-lx{
	width: 15vw;
	top: 40vh;
	left: 8.5vw;
}
.g7-4-lx.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--４重の太い縞矢印(左)(スマートフォン・縦)--*/
.g7-4-ar3-position1{
	width: 12vw;
	top: 53vh;
	left: 10vw;
	transform: rotate(90deg);
}
.g7-4-ar3-position1.active {
	transform: rotate(90deg) !important;
	transform: translateY(2vw);
	opacity: 1;
}

/*--円グラフ(左)(スマートフォン・縦)--*/
.g7-4-cir-lx{
	width: 26vw;
	top: 59vh;
	left: 3vw;
}
.g7-4-cir-lx.active {
	transform: translateY(2vw);
	opacity: 1;
}


/*--濃縮〇(スマートフォン・縦)--*/
.g7-4-con{
	width: 25vw;
	top: 20vh;
	left: 37vw;
}
.g7-4-con.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--横の太い縞矢印(中央)(スマートフォン・縦)--*/
.g7-4-ar2-position2{
	width: 25vw;
	top: 32vh;
	left: 37vw;
	transform: rotate(90deg);
}
.g7-4-ar2-position2.active {
	transform: rotate(90deg);
	opacity: 1;
}

/*--軟エキス(スマートフォン・縦)--*/
.g7-4-sx{
	width: 22vw;
	top: 40vh;
	left: 42vw;
}
.g7-4-sx.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--４重の太い縞矢印(中央)(スマートフォン・縦)--*/
.g7-4-ar3-position2{
	width: 12vw;
	top: 53vh;
	left: 44vw;
	transform: rotate(90deg);
}
.g7-4-ar3-position2.active {
	transform: rotate(90deg) !important;
	transform: translateY(2vw);
	opacity: 1;
}

/*--円グラフ(中央)(スマートフォン・縦)--*/
.g7-4-cir-sx{
	width: 26vw;
	top: 59vh;
	left: 37vw;
}
.g7-4-cir-sx.active {
	transform: translateY(2vw);
	opacity: 1;
}


/*--噴霧乾燥〇(スマートフォン・縦)--*/
.g7-4-spr{
	width: 25vw;
	top: 20vh;
	left: 70vw;
}
.g7-4-spr.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--横の太い縞矢印(右)(スマートフォン・縦)--*/
.g7-4-ar2-position3{
	width: 25vw;
	top: 32vh;
	left: 70vw;
	transform: rotate(90deg);
}
.g7-4-ar2-position3.active {
	transform: rotate(90deg);
	opacity: 1;
}

/*--乾燥エキス(スマートフォン・縦)--*/
.g7-4-dx{
	width: 24vw;
	top: 43vh;
	left: 71.5vw;
}
.g7-4-dx.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--４重の太い縞矢印(右)(スマートフォン・縦)--*/
.g7-4-ar3-position3{
	width: 12vw;
	top: 53vh;
	left: 76.7vw;
	transform: rotate(90deg);
}
.g7-4-ar3-position3.active {
	transform: rotate(90deg) !important;
	transform: translateY(2vw);
	opacity: 1;
}

/*--円グラフ(右)(スマートフォン・縦)--*/
.g7-4-cir-dx{
	width: 26vw;
	top: 59vh;
	left: 70vw;
}
.g7-4-cir-dx.active {
	transform: translateY(2vw);
	opacity: 1;
}


/*--g7-4 span(文字)--*/
/*--例１コウジン
	例２ボタンピ(スマートフォン・縦)--*/
.g7-4-ex {
	top: 7vh;
	left: 42vw;
}

/*--１００ｋｇ(スマートフォン・縦)--*/
.g7-4-100kg {
	top: 3.5vh;
	left: 78.2vw;	
}

/*--液体から(スマートフォン・縦)--*/
.g7-4-dilu {
	top: 33vh;
	left: 30vw;
	transform: scale(1.5) !important;	
}
.g7-4-dilu.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--濃縮物または乾燥物へ(スマートフォン・縦)--*/
.g7-4-conc {
	top: 33vh;
	left: 60vw;	
	transform: scale(1.5) !important;		
}
.g7-4-conc.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--抽出（工程）(スマートフォン・縦)--*/
.g7-4-extr {
	top: 33vh;
	left: 12.5vw;
}
.g7-4-extr.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--濃縮（工程）(スマートフォン・縦)--*/
.g7-4-conce {
	top: 33vh;
	left: 45.7vw;	
}
.g7-4-conce.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--乾燥（工程）(スマートフォン・縦)--*/
.g7-4-sp {
	top: 33vh;
	left: 78.7vw;	
}
.g7-4-sp.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--１：１(スマートフォン・縦)--*/
.g7-4-1-1 {
	top: 51vh;
	left: 10vw;	
	transform: scale(1.5) !important;	
}

/*--５：１(スマートフォン・縦)--*/
.g7-4-5-1 {
	top: 51vh;
	left: 43.5vw;
	transform: scale(1.5) !important;	
}

/*--１０：１(スマートフォン・縦)--*/
.g7-4-10-1 {
	top: 51vh;
	left: 75.8vw;
	transform: scale(1.5) !important;	
}

/*--１００L(スマートフォン・縦)--*/
.g7-4-100L {
	top: 42vh;
	left: 3vw;	
}

/*--２０ｋｇ(スマートフォン・縦)--*/
.g7-4-20kg {
	top: 42vh;
	left: 36vw;	
}

/*--１０ｋｇ(スマートフォン・縦)--*/
.g7-4-10kg {
	top: 42vh;
	left: 70vw;	
}

/*--コウジン流エキス、ボタンピ流エキス(スマートフォン・縦)--*/
.g7-4-koujin-lx {
	top: 46vh;
	left: 10vw;
	transform: scale(1.5) !important;		
}

/*--ボタンピ軟エキス(スマートフォン・縦)--*/
.g7-4-botanpi-sx {
	top: 46.5vh;
	left: 42.7vw;	
	transform: scale(1.5) !important;		
}

/*--コウジン乾燥エキス(スマートフォン・縦)--*/
.g7-4-koujin-dx {
	top: 46.5vh;
	left: 75.7vw;	
	transform: scale(1.5) !important;		
}

/*--ＣＯ２　０.５０t(スマートフォン・縦)--*/
.g7-4-050t {
	top: 62vh;
	left: 11vw;	
}
.g7-4-050t.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--ＣＯ２　０.３４t(スマートフォン・縦)--*/
.g7-4-034t {
	top: 62vh;
	left: 45vw;	
}
.g7-4-034t.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--ＣＯ２　０.３８t(スマートフォン・縦)--*/
.g7-4-038t {
	top: 62vh;
	left: 78vw;	
}
.g7-4-038t.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--１００％(スマートフォン・縦)--*/
.g7-4-100 {
	top: 76vh;
	left: 10vw;	
}

/*--３２％(スマートフォン・縦)--*/
.g7-4-32 {
	top: 76vh;
	left: 45vw;	
}

/*--２４％(スマートフォン・縦)--*/
.g7-4-24 {
	top: 76vh;
	left: 80vw;	
}

/*--0.5t(100L)×100L/100L＝0.50ｔ(スマートフォン・縦)--*/
.g7-4-cal050 {
	width: 29vw;
	top: 72vh;
	left: 1vw;	
}

/*--1.7t(100kg)×20kg/100kg＝0.34ｔ(スマートフォン・縦)--*/
.g7-4-cal034{
	width: 33vw;
	top: 72vh;
	left: 33vw;	
}

/*--3.8t(100kg)×10kg/100kg＝0.38ｔ(スマートフォン・縦)--*/
.g7-4-cal038{
	width: 34vw;
	top: 72vh;
	left: 67vw;	
}
/*********************************************/


/*-------------------------------------*/
/*--ゴール８--*/
/*--縦方向はvhを横方向はvwを用いる--*/

/*--ゴール８文章(スマートフォン・縦)--*/
/*--地元住民を積極的に(スマートフォン・縦)--*/
.g8 section{
	width: 92vw;
	top: 1vw;
	left: 2vw;
}
.g8 section.active {
	opacity: 1;
}


/*--縞模様の大きさ(スマートフォン・縦)--*/
.g8 .box {
	display: none;
}

/*--横線１(スマートフォン・縦)--*/
.g8-line-yoko1{
	top:26vw;
	left:0vw;
	z-index: 1;
}

/*--横線２(スマートフォン・縦)--*/
.g8-line-yoko2{
	display: none;
}

/*--縦線１(スマートフォン・縦)--*/
.g8-line-tate1{
	display: none;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G8 地元雇用の割合(スマートフォン・縦)--*/
.g8-koyou{
	width: 95vw;
	top: 17vh;
	left: 2vw;
}
.g8-koyou.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--G8 1990年(スマートフォン・縦)--*/
.g8-1990{
	width: 48vw;
	top: 52vh;
	left: 2vw;
}
.g8-1990.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--G8 2023年(スマートフォン・縦)--*/
.g8-2023{
	width: 48vw;
	top: 50vh;
	left: 50vw;
}
.g8-2023.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--g8 span(文字)(スマートフォン・縦)--*/
/*--亀岡工場の(スマートフォン・縦)--*/
.g8-kameoka {
	top: 15vh;
	left: 40.2vw;	
}
.g8-kameoka.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--地域従業員(スマートフォン・縦)--*/
.g8-chiiki {
	top: 18.8vh;
	left: 34.5vw;	
}
.g8-chiiki.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--約39%(スマートフォン・縦)--*/
.g8-39{
	top: 33vh;
	left: 11.2vw;
}

/*--約2002年(スマートフォン・縦)--*/
.g8-2002{
	top: 42vh;
	left: 11vw;
}

/*--約60%(スマートフォン・縦)--*/
.g8-60{
	top: 33vh;
	left: 70.1vw;
}

/*--現在（2023）(スマートフォン・縦)--*/
.g8-gen{
	top: 42vh;
	left: 73vw;
}


/*--亀岡工場：1990年(スマートフォン・縦)--*/
.g8-k1990 {
	top: 50.5vh;
	left: 2.2vw;	
}
.g8-k1990.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--亀岡工場：現在(スマートフォン・縦)--*/
.g8-now {
	top: 70.5vh;
	left: 55vw;	
}
.g8-now.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--事業の発展≒地域雇用の拡充(スマートフォン・縦)--*/
.g8-deve {
	top: 47.5vh;
	left: 32vw;	
}
/*-------------------------------------*/


/*********************************************/
/*--ゴール９--*/
/*--G9文章(スマートフォン・縦)--*/
/*--亀岡工場は東西と南北に(スマートフォン・縦)--*/
.g9-sec1{
	width: 45vw;
	top: 0.5vh;
	left: 1vw
}
.g9-sec1.active {
	opacity: 1;
}

/*--全工程に同等(スマートフォン・縦)--*/
.g9-sec2{
	top: 24vh;
	left: 1vw
}
.g9-sec2.active {
	opacity: 1;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g9 .box,
.g9 .box2 {
	display: none;
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G9 配置図(スマートフォン・縦)--*/
.g9-haichi{
	width: 95vw;
	top: -1vh;
	left: 2vw;
}


/*--横線(スマートフォン・縦)--*/
.g9-line-yoko1{
	top: 23vh;
	left: 0;
}

/*--横線３(スマートフォン・縦)--*/
.g9-line-yoko3,
.g9-line-tate1,
.g9-line-tate2{
	display: none;
}

/*--横線（太）(スマートフォン・縦)--*/
.g9-line-yoko2{
	top: 52.5vh;
	left: 50%; /* 要素の左側を中心に配置 */
	width: 0;	/*--伸びる前の幅を指定します--*/
	height: 2px !important;
    transform: translateX(-50%); /* 中心揃え */
}
.g9-line-yoko2.active {
    width: 90%; /*--線が中心から左右に伸びる幅を指定します--*/
}

/*--縦線３（太）(スマートフォン・縦)--*/
.g9-line-tate3{
	top: 53vh;
	left: 32vw;
	width: 2px;
	transform: translateY(-50%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 5s;
	animation-name: expandHeight2; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

/*--縦線４（太）(スマートフォン・縦)--*/
.g9-line-tate4{
	top: 53vh;
	left: 66vw;
	width: 2px;
	transform: translateY(-50%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 5s;
	animation-name: expandHeight2; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

@keyframes expandHeight2 {
	from {
	  height: 0px; /* 開始時の高さ */
	}
	to {
	  height: 220px; /* 終了時の高さ */
	}
}


/*--第１第２(スマートフォン・縦)--*/
.g9-1and2{
	width: 95vw;
	top: 25vh;
	left: 2vw;
}

/*--抽出（１－２の間）(スマートフォン・縦)--*/
.g9-ext2{
	width: 15vw;
	top: 28vh;
	left: 41.8vw;
}


/*--原料管理(スマートフォン・縦)--*/
.g9-mate{
	width: 25vw;
	top: 38vh;
	left: 2vw;
}

/*--抽出(スマートフォン・縦)--*/
.g9-ext{
	width: 25vw;
	top: 38vh;
	left: 37.4vw;
}

/*--濃縮(スマートフォン・縦)--*/
.g9-con{
	width: 25vw;
	top: 38vh;
	left: 72vw;
}

/*--噴霧(スマートフォン・縦)--*/
.g9-spr{
	width: 25vw;
	top: 54.5vh;
	left: 2vw;
}

/*--製剤(スマートフォン・縦)--*/
.g9-phar{
	width: 25vw;
	top: 54.5vh;
	left: 37.4vw;
}

/*--製品(スマートフォン・縦)--*/
.g9-prod{
	width: 25vw;
	top: 54.5vh;
	left: 72vw;
}

/*--作業員(スマートフォン・縦)--*/
.g9-ope{
	width: 14vw;
	top: 66vh;
	left: 1.5vw;
	transform: scaleX(-1) !important;	/*--左右反転--*/
}
.g9-ope.active {
    transform: translateX(2vw);
    opacity: 1;
}

/*--線と点(スマートフォン・縦)--*/
.g9-dots-line{
	width: 17vw;
	top: 68.5vh;
	left: 35vw;
}

/*--火災(スマートフォン・縦)--*/
.g9-fire{
	width: 8vw;
	top: 68vh;
	left: 75vw;	
}

/*--ぐるぐる矢印(スマートフォン・縦)--*/
.g9-cir{
	width: 8vw;
	top: 70vh;
	left: 14vw;	
}

/*--g9 span(文字)--*/
/*--バックアップ（抽出）--*/
.g9-back {
	display: none !important;
}


/*--独立化(スマートフォン・縦)--*/
.g9-inde {
	top: 38vh;
	left: 21.5vw;	
}
.g9-inde.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--万一の火災でも(スマートフォン・縦)--*/
.g9-kasai {
	top: 67vh;
	left: 22vw;	
}

/*--延焼は無(スマートフォン・縦)--*/
.g9-ensyou {
	top: 69.7vh;
	left: 48vw;	
}

/*--全ての工程に(スマートフォン・縦)--*/
.g9-all {
	top: 70vh;
	left: 24vw;	
}

/*--強靭なインフラ構築(スマートフォン・縦)--*/
.g9-strong {
	top: 76.7vh;
	left: 42vw;	
}
/*-------------------------------------*/


/*********************************************/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール１２(スマートフォン・縦)--*/


/*--G12文章(スマートフォン・縦)--*/
/*--亀岡工場の管理棟は(スマートフォン・縦)--*/
.g12-sec1{
	width: 95vw;
	top: 0.3vh;
	left: 2vw
}

/*--万一のロックダウン(スマートフォン・縦)--*/
.g12-sec2{
	width: 95vw;
	top: 57vh;
	left: 2vw
}

/*--働き方改革(スマートフォン・縦)--*/
.g12-sec3{
	width: 32vw;
	top: 60vh;
	left: 65vw
}

/*--社内ネットワークやサテライト(スマートフォン・縦)--*/
.g12-sec4{
	display: none !important;
	
	width: 95vw;
	top: 68vh;
	left: 2vw
}



/*--縦・横　線(スマートフォン・縦)--*/
.g12-line-tate1,
.g12-line-tate2,
.g12-line-yoko1,
.g12-line-yoko2{
	display: none;
}

/*--横線３(スマートフォン・縦)--*/
.g12-line-yoko3{
	top: 55.7vh;
	left:0vw;
}

/*--縞模様(スマートフォン・縦)--*/
.g12 .box,
.g12 .box2 {
	display: none;
}


/*--gif画像--*/
/*--G12--*/
/*--管理棟(スマートフォン・縦)--*/
.g12-kanri {
	width: 40vw;
	top: 2.5vh;
	left: 0vw;	
}

/*--head（本社）(スマートフォン・縦)--*/
.g12-head {
	width: 40vw;
	top: 2.5vh;
	left: 60vw;	
}
.g12-head.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--ねじれ矢印(スマートフォン・縦)--*/
.g12-arrow {
	width: 10vw;
	top: 8vh;
	left: 43.5vw;	
	transform: rotate(90deg) !important;
}
.g12-arrow.active {
	transform: rotate(90deg) !important;
	transform: translateY(2vw);
	opacity: 1;
}

/*--分岐(スマートフォン・縦)--*/
.g12-arrow2 {
	display: none !important;
}

.g12-arrow2-90deg{
	position: absolute;
	width: 95vw;
	top: 17vh;
	left: 2vw;
}
.g12-arrow2-90deg.active {
	opacity: 1;
}


/*--工程(スマートフォン・縦)--*/
.g12-koutei {
	width: 28vw;
	top: 20.5vh;
	left: 6vw;	
}
.g12-koutei.active {
	transform: translateX(2vw);
	opacity: 0.7;
}

/*--生産（受発注）(スマートフォン・縦)--*/
.g12-seisan {
	width: 32vw;
	top: 21.2vh;
	left: 62vw;	
}
.g12-seisan.active {
	transform: translateX(-2vw);
	opacity: 1;
}



/*--ネットワーク(スマートフォン・縦)--*/
.g12-net {
	width: 60vw;
	top: 63vh;
	left: 2vw;	
}

.g12-desk {
	display: none !important;
}

/*--2拠点(スマートフォン・縦)--*/
.g12-2points {
	width: 17vw;
	top: 72vh;
	left: 4vw;	
}
.g12-2points.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--色矢印1(スマートフォン・縦)--*/
.g12-arrow3-1 {
	width: 6vw;
	top: 72vh;
	left: 30vw;	
}

/*--色矢印2(スマートフォン・縦)--*/
.g12-arrow3-2 {
	width: 9vw;
	top: 74vh;
	left: 25vw;	
}


/*--顧客(スマートフォン・縦)--*/
.g12-cus1, .g12-cus2, .g12-cus3, .g12-cus4 {
	width: 10vw;
}
.g12-cus1{
	top: 48vh;
	left: 4vw;	
}
.g12-cus2 {
	top: 51vh;
	left: 21.9vw;	
}
.g12-cus3 {
	top: 51vh;
	left: 56.2vw;	
}
.g12-cus4 {
	top: 49.5vh;
	left: 85vw;	
}
.g12-cus5 {
	width: 14vw;
	top: 73vh;
	left: 40vw;	
}

.g12-cus.active {
	transform: translateY(-2vw);
	opacity: 1;	
}
.g12-cus5.active {
	transform: translateX(2vw);
	opacity: 1;	
}


/*--四角形(スマートフォン・縦)--*/
.g12-dots-line {
	width: 28vw;
	top: 68vh;
	left: 66.5vw;	
}


/*--g12 span(文字)--*/
/*--亀岡工場 管理棟(スマートフォン・縦)--*/
.g12-kame-kan {
	top: 17.7vh;
	left: 13vw;	
}
.g12-kame-kan.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--道修町 本社(スマートフォン・縦)--*/
.g12-dosho-head {
	top: 17.7vh;
	left: 69vw;	
}
.g12-dosho-head.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--受注・生産・出荷(スマートフォン・縦)--*/
.g12-jyu-sei {
	top: 30vh;
	left: 43.5vw;	
}
.g12-jyu-sei.active {
	transform: scale(1.5);
	opacity: 1;
}

/*--取引先(スマートフォン・縦)--*/
.g12-sei-han {
	top: 50vh;
	left: 37vw;	
	transform: scale(1.7)  !important;
}
.g12-sei-han.active {
	transform: scale(1.7)  !important;
	opacity: 1;
}

/*--２拠点化(スマートフォン・縦)--*/
.g12-2kyoten {
	top: 68.5vh;
	left: 74vw;	
}

/*--重要な業務を(スマートフォン・縦)--*/
.g12-impor {
	top: 71.5vh;
	left: 69vw;	
}

/*--効率化・生産性の向上(スマートフォン・縦)--*/
.g12-kouritsu {
	top: 73.8vh;
	left: 78vw;	
}

/*--大規模な災害時などの(スマートフォン・縦)--*/
.g12-daikibo {
	top: 75.3vh;
	left: 68vw;	
}

/*--受注や問合せ、渉外対応(スマートフォン・縦)--*/
.g12-ser {
	top: 78.5vh;
	left: 76vw;	
}

/*-------------------------------------*/


/*********************************************/


/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール１３(スマートフォン・縦)--*/

/*--横線１(スマートフォン・縦)--*/
.g13-line-yoko1{
	display: none;
}

/*--横線２(スマートフォン・縦)--*/
.g13-line-yoko2{
	top:26vh;
	left:0vw;
	z-index: 1;
}

/*--縦線１(スマートフォン・縦)--*/
.g13-line-tate1{
	display: none;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g13 .box {
	display: none;
}


/*--ゴール１３文章(スマートフォン・縦)--*/
/*--G13文章--*/
/*--私たちが実践する「気象--*/
.g13-sec1{
	width: 95vw;
	top: 1vh;
	left: 2vw
}
.g13-sec1.active {
	opacity: 1;
}

/*--原材料の確保 ＝『サプライチェーンの根幹をより強固に』(スマートフォン・縦)--*/
.g13-sec2{
	top: 63vh;
	left: 2.5vw
}

/*--垂直展開となる外国製造業者による(スマートフォン・縦)--*/
.g13-sec3{
	width: 80vw;
	top: 65vh;
	left: 2.5vw
}

/*--世界規模で変化する資源情勢を視野に入れ、(スマートフォン・縦)--*/
.g13-sec4{
	width: 95vw;
	top: 27vh;
	left: 2vw
}
.g13-sec4.active {
	opacity: 1;
}

/*--事業活動による植物等(スマートフォン・縦)--*/
.g13-sec5{
	width: 17vw;
	top: 18vh;
	left: 5vw
}

/*--屋上緑化、工場緑化で(スマートフォン・縦)--*/
.g13-sec6{
	width: 17vw;
	top: 18vh;
	left: 76vw
}

/*--亀岡工場では既存の原料倉庫棟以外に(スマートフォン・縦)--*/
.g13-sec7 {
	top: 48.5vh;
	left: 8vw;	
}	


/*--gif画像--*/
/*--CO2排出(スマートフォン・縦)--*/
.g13-co2-out {
	width: 20vw;
	top: 10.5vh;
	left: 3vw;	
}

/*--天秤(スマートフォン・縦)--*/
.g13-ten {
	width: 50vw;
	top: 17vh;
	left: 24.5vw;	
}

/*--CO2吸収(スマートフォン・縦)--*/
.g13-co2-in {
	width: 20vw;
	top: 9vh;
	left: 74vw;	
}

/*--商品倉庫棟(スマートフォン・縦)--*/
.g13-shohin {
	width: 70vw;
	top: 67vh;
	left: 1vw;	
}
.g13-shohin.active {
	transform: translateY(2vw);
	opacity: 1;
}

/*--船(スマートフォン・縦)--*/
.g13-ship {
	width: 28vw;
	top: 66vh;
	left: 70vw;	
}

/*--１.２原料倉庫棟(スマートフォン・縦)--*/
.g13-1-2gen {
	width: 77vw;
	top: 31vh;
	left: 7vw;	
}
.g13-1-2gen.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--植物資源(スマートフォン・縦)--*/
.g13-shigen {
	width: 17vw;
	top: 32.5vh;
	left: 55vw;	
}
.g13-shigen.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--地球(スマートフォン・縦)--*/
.g13-earth {
	width: 16vw;
	top: 33vh;
	left: 76vw;	
}
.g13-earth.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--L型の線(スマートフォン・縦)--*/
.g13-L-line {
	width: 94vw;
	top: 52.5vh;
	left: 2vw;	
}
.g13-L-line.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--干ばつ(スマートフォン・縦)--*/
.g13-nature {
	width: 21vw;
	top: 54.5vh;
	left: 2vw;	
}


/*--原材料(スマートフォン・縦)--*/
.g13-crude {
	width: 28vw;
	top: 53.5vh;
	left: 31vw;	
}

/*--製品(スマートフォン・縦)--*/
.g13-prod {
	width: 20vw;
	top: 54.5vh;
	left: 70vw;	
}



/*--g13 span(文字)(スマートフォン・縦)--*/
/*--環境影響--*/
.g13-inf {
	top: 10vh;
	left: 27.8vw;	
}

/*--CO2の排出(スマートフォン・縦)--*/
.g13-huka {
	top: 12.2vh;
	left: 28.3vw;	
}

/*--環境配慮(スマートフォン・縦)--*/
.g13-effort {
	top: 7.5vh;
	left: 60.4vw;	
}

/*--事業活動による環境負荷　－　私たち(スマートフォン・縦)--*/
.g13-mainasu {
	top: 22.5vh;
	left: 4.5vw;	
}

/*--環境的リスク：自然災害・パン(スマートフォン・縦)--*/
.g13-3fac {
	display: none !important;
}

/*--万一の異常気象・不作(スマートフォン・縦)--*/
.g13-husaku {
	top: 52.7vh;
	left: 3.5vw;	
}

/*--複数年分の原材料を確保(スマートフォン・縦)--*/
.g13-many {
	top: 62vh;
	left: 26vw;	
}


/*--恒常的な生産(スマートフォン・縦)--*/
.g13-kou {
	top: 62vh;
	left: 53.5vw;	
}

/*--安定供給・急激な価格変動の防止(スマートフォン・縦)--*/
.g13-stable {
	top: 52.7vh;
	left: 70vw;	
}

/*--つくる責任(スマートフォン・縦)--*/
.g13-resp {
	top: 62vh;
	left: 87vw;	
}
/*********************************************/


/*-------------------------------------*/

/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール１７(スマートフォン・縦)--*/


/*--G17文章(スマートフォン・縦)--*/
/*--SDGsが掲げる１７の目標は(スマートフォン・縦)--*/
.g17-sec1{
	width: 95vw;
	top: 0.5vh;
	left: 2vw
}

/*--単独で目標に取り組むだけでなく、(スマートフォン・縦)--*/
.g17-sec2{
	width: 95vw;
	top: 7.5vh;
	left: 2vw
}

/*--複数の企業同士が他には無い互いの(スマートフォン・縦)--*/
.g17-sec3{
	width: 95vw;
	top: 27.5vh;
	left: 2vw
}

/*-- 現状に基づいた私たちのSDGsモデル(スマートフォン・縦)--*/
.g17-sec4{
	top: 39.8vh;
	left: 3vw
}

/*--「経済」の発展は、生活や教育などの(スマートフォン・縦)--*/
.g17-sec5{
	width: 30vw;
	top: 42.5vh;
	left: 3vw
}


/*--gif画像--*/
/*--寄付(スマートフォン・縦)--*/
/*--１７人が手をつなぐ(スマートフォン・縦)--*/
.g17-hand {
	width: 90vw;
	top: 18vh;
	left: 4.5vw;	
}

/*--G12 アイコン--*/
.g17-icon12 {
	width: 6vw;
	top: 52.7vh;
	left: 32.2vw;		
}

/*--G3 アイコン--*/
.g17-icon3 {
	width: 6vw;
	top: 59.4vh;
	left: 13vw;		
}

/*--G8 アイコン--*/
.g17-icon8 {
	width: 6vw;
	top: 63.3vh;
	left: 13vw;				
}

/*--G5 アイコン--*/
.g17-icon5 {
	width: 6vw;
	top: 59.4vh;
	left: 82vw;		
}

/*--G4 アイコン--*/
.g17-icon4 {
	width: 6vw;
	top: 63.3vh;
	left: 82vw;		
}

/*--G7 アイコン--*/
.g17-icon7 {
	width: 6vw;
	top: 68.4vh;
	left: 9vw;			
}

/*--G9 アイコン--*/
.g17-icon9 {
	width: 6vw;
	top: 68.4vh;
	left: 90vw;			
}

/*--G12 アイコン--*/
.g17-icon12 {
	width: 6vw;
	top: 52.7vh;
	left: 32.2vw;		
}

/*--G13 アイコン--*/
.g17-icon13 {
	width: 6vw;
	top: 73.5vh;
	left: 30.5vw;	
}

/*--握手する人--*/
.g17-shake {
	width: 20vw;
	top: 42vh;
	left: 70vw;	
}


/*--G17 アイコン(スマートフォン・縦)--*/
.g17-icon17 {
	width: 13vw;
	top: 45.8vh;
	left: 42vw;	
}

/*--上の輪(スマートフォン・縦)--*/
.g17-top {
	width: 28vw;
	top: 52vh;
	left: 34.5vw;	
}

/*--中央の輪(スマートフォン・縦)--*/
.g17-middle {
	width: 42vw;
	top: 58vh;
	left: 28vw;	
}

/*--下の輪(スマートフォン・縦)--*/
.g17-bottom {
	width: 88vw;
	top: 65vh;
	left: 5vw;	
}

/*--カラフルな横線--*/
.g17-color-bar {
	width: 100%;
	top: 79vh;
	left: 0;	
	z-index: 5;
}


/*--g17 span(文字)--*/
/*--グローバルパートナーシップ(スマートフォン・縦)--*/
.g17-partner {
	top: 25.9vh;
	left: 32.5vw;	
}


/*--商品開発（手をつなぐ画像の上）(スマートフォン・縦)--*/
.g17-dev {
	top: 43vh;
	left: 65vw;	
}

/*--受託製造（手をつなぐ画像の上）(スマートフォン・縦)--*/
.g17-out {
	top: 45vh;
	left: 88vw;	
}

/*--当社の原薬（手をつなぐ画像の上）(スマートフォン・縦)--*/
.g17-resi {
	top: 47vh;
	left: 60vw;	
}

/*--持続可能な（手をつなぐ画像の上）(スマートフォン・縦)--*/
.g17-mate {
	top: 49vh;
	left: 88vw;	
}



/*--ゴールの内容(スマートフォン・縦)--*/
/*--持続可能な生産供給体制(スマートフォン・縦)--*/
.g17-g12 {
	top: 52vh;
	left: 40.3vw;	
}

/*--地域社会への貢献と(スマートフォン・縦)--*/
.g17-g3 {
	top: 58vh;
	left: 20vw;	
}

/*--働きがいのある職場環境を(スマートフォン・縦)--*/
.g17-g8 {
	top: 62vh;
	left: 20vw;	
}

/*--女性社員の積極的登用(スマートフォン・縦)--*/
.g17-g5 {
	top: 58vh;
	left: 60vw;	
}

/*--未来を担う子どもたちが(スマートフォン・縦)--*/
.g17-g4 {
	top: 62vh;
	left: 60vw;	
}

/*--持続可能な近代的エネルギーに(スマートフォン・縦)--*/
.g17-g7 {
	top: 67vh;
	left: 16vw;	
}

/*--レジリエントな生産を可能とする基盤(スマートフォン・縦)--*/
.g17-g9 {
	top: 67vh;
	left: 63vw;	
}

/*--気象変動を配慮した事業活動と(スマートフォン・縦)--*/
.g17-g13 {
	top: 72vh;
	left: 38vw;	
}

/*--『経済』(スマートフォン・縦)--*/
.g17-economy {
	top: 52vh;
	left: 4vw;
}

/*--『社会』(スマートフォン・縦)--*/
.g17-society {
	top: 57.8vh;
	left: 4vw;
}

/*--『環境』(スマートフォン・縦)--*/
.g17-environment {
	top: 68.7vh;
	left: 4vw;
}


/*--横線１(スマートフォン・縦)--*/
.g17-line-yoko1{
	display: none;
}

/*--横線２(スマートフォン・縦)--*/
.g17-line-yoko2{
	display: none;
}

/*--のびる横線３(スマートフォン・縦)--*/
.g17-line-yoko3 {
  top: 53.7vh;
  left: 4vw;
  z-index: 1;
  transition: width 2s;
  width: 0;
}

.g17-line-yoko3.active {
  width: 36%;
}

/*--のびる横線4(スマートフォン・縦)--*/
.g17-line-yoko4 {
	top: 59.5vh;
	left: 4vw;
	z-index: 1;
	transition: width 2s;
	width: 0;
}
.g17-line-yoko4.active {
	width: 30%;
}

/*--のびる横線5(スマートフォン・縦)--*/
.g17-line-yoko5 {
	top: 70.2vh;
	left: 4vw;
	z-index: 1;
	transition: width 2s;
	width: 0;
}
.g17-line-yoko5.active {
	width: 25%;
}
  

/*--縦線１(スマートフォン・縦)--*/
.g17-line-tate1{
	display: none;
}

/*--縞模様の大きさ(スマートフォン・縦)--*/
.g17 .box {
	display: none;
}

/*********************************************/


/*--ページ末尾の航空写真とSDGsロゴ付近の設定（スマートホン用）--*/
.sky{
	/*border: solid 1px #1b973a;
	height: 100vh;
	background: linear-gradient(to bottom, rgb(255, 255, 255)0%,rgba(255, 255, 255, 0)30%, rgba(213, 229, 245, 0.3)70%,rgb(255, 255, 255)100%);*/
	display: none;
}

.ka-plant{
	display: none;
}

.ka-plant-portrait{
	display: none;
}

/*
.ka-plant-portrait.active {
	transform: translateY(-100vh);
	opacity: 1;
}*/



/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

/*PAGE TOP（↑）設定------------------------------------------*/
/*ボタンの設定*/
.pagetop a {
	font-size: 1.5em;	/*文字サイズ*/
	width: 12vw;		/*幅*/
	line-height: 12vw;	/*高さ*/
}


}

/*---------------------------------------------------------------------------
ここから下は画面が「縦長」の場合の追加指定(主としてタブレット端末)
---------------------------------------------------------------------------*/
/*一般的なタブレット端末とスマートフォンの縦置きを判別するための
CSSメディアクエリの例。この方法は全てのタブレット端末やスマートフォンに
対応するわけではなく、一部の機種で正確な判別が行えない場合があります。 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {



body:-webkit-scrollbar {
	display: none;
	-webkit-appearance: none;
}



/*--ページ上にある社名--*/
header .logo{					
	display: block;				/*--ブロック要素--*/
	width: 38vw;		/*--表示幅の指定--*/
	position: absolute;			/*--画面左上を基点になる--*/
	top: 5vw;					/*--画面上からの距離--*/
	left: 50%;
	transform: translateX(-45%);
	position: fixed;			/*--要素を固定--*/
	/*z-index: -1;				/*--重なりの順序を指定--*/
}

.icon-container {
	display: flex;		/*--中の要素を横並びに--*/
	flex-wrap: wrap;	/*--一列で収まらない場合は--*/
	justify-content: center;

	align-items: flex-start; /*-iPad mini など、特定のデバイスでアイコンが縦長になったので挿入--*/
	overflow: hidden;
	
	
	margin: auto 0;
	z-index: 50;
	background-color: rgba(255, 255, 255,1);	/*1>透明*/	
	/*border: solid 0.5px #d64646;*/
}

.icon-container img{
	width: 7vw;
}

.icon-fixed{
	top: 15vw;
	max-width: 100vw;
	margin: auto 0;
	background-color: rgba(255, 255, 255,0);	/*--透明--*/
}

/*--地点目印の大きさ、色　小さい画面では大きを調整--*/
.point {
	width: 5px;
	height: 5px;
	border-radius: 50%;	/*--丸にする--*/
}
   

/*============================
CSS　nav(スマートフォン用ナビメニュー
=============================*/
nav .inner ul li a {
	display: block;
	min-height: 6.4vh;
	color: #333;
	font-size: 18px;
	padding: 0.5em;
	text-decoration: none;
	transition-duration: 0.2s;
}

/*============
.toggle_btn
=============*/
.toggle_btn {
	top: 42px;
	right: 50px;
	width: 30px;
}

.toggle_btn span {
	width: 35px;
	height: 2.5px;
}




.blessing .leaf-l{display: none;}

.blessing .leaf-r{display: none;}

.blessing .leaf2{display: none;}

.blessing .leaf3{display: none;}


/*--共通設定：文章以外の<span>に適用、どうしても画像と重なる要素があるため周囲を白くする(タブレット・縦)--*/
.each-g span {
	text-shadow:2px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF,  0 -1px 0 #FFF,
	-1px 0 0 #FFF, 1px 0 0 #FFF !important;
}
.reversal span {
	text-shadow: none !important; /*-- ターゲットとなるスタイルを除外するためのプロパティ --*/
}

.each-g span span {
	text-shadow: none; /*-- ターゲットとなるスタイルを除外するためのプロパティ --*/
}

/*--タブレットは縦方向の長さがスマートフォンよりも短いため行間を少し狭くする--*/
.each-g section{
	font-size: 1.6vh;
	line-height: 1.5;
}



/*********************************************/
/*--タブレット縦--*/	
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール３(タブレット・縦)--*/

/*--ゴール３文章(タブレット・縦)--*/
/*--堅実な事業の発展(タブレット・縦)--*/
.g3 section{
	width: 48vw;
	top: 2vw;
	left: 48vw;
}

/*--横線(タブレット・縦)--*/
.g3-line-yoko1{
	top:29vw;
	left:0vw;
	z-index: 1;
}

/*--gif画像--*/
/*--寄付(タブレット・縦)--*/
.g3-kihu{
	width: 35vw;
	top: 1.5vh;
	left: 1vw;
}

/*--福祉(タブレット・縦)--*/
.g3-hukushi{
	width: 77vw;
	top: 25vh;
	left: 12vw;
}

/*--スポーツ(タブレット・縦)--*/
.g3-sports{
	width: 80vw;
	top: 42vh;
	left: 15vw;
}

/*--g3 span(文字)(タブレット・縦)--*/
/*--保健衛生の向上と福祉の充実--*/
.g3-hoken{
	top: 23vh;
	left: 3vw;
}

/*--災害時における(タブレット・縦)--*/
.g3-saigai{
	top: 35vh;
	left: 53vw;
	text-align: left;

}

/*--京都亀岡ハーフマラソン(タブレット・縦)--*/
.g3-mara{
	width: 30vw;
	top: 40vh;
	left: 3vw;
}

/*--企業としての新たな(タブレット・縦)--*/
.g3-kigyoutoshite{
	top: 63.5vh;
	left: 67vw;
}

/*--価値創出(タブレット・縦)--*/
.g3-kachi{
	top: 67.47vh;
	left: 72vw;
}

/*--収益を介した(タブレット・縦)--*/
.g3-sankaku{
	top: 73vh;
	left: 69vw;
}
/*-------------------------------------*/


/*********************************************/
/*--ゴール４(タブレット・縦)--*/
/*--gif画像--*/
/*--子ども(タブレット・縦)--*/
.g4-children {
	width: 18vw;
	top: 16vh;
	left: 43vw;	
}

/*--kirinoko1(タブレット・縦)--*/
.g4-kirinoko1 {
	width: 40vw;
	top: 16vh;
	left: 1vw;	
}

/*--kirinoko2(タブレット・縦)--*/
.g4-kirinoko2 {
	width: 30vw;
	top: 14.5vh;
	left: 65vw;	
}

/*--気球（人だけ）(タブレット・縦)--*/
.g4-kikyuu1 {
	width: 33vw;
	top: 56vh;
	left: 3vw;	
}

/*--気球だけ(タブレット・縦)--*/
.g4-kikyuu2 {
	width: 16vw;
	top: 45.5vh;
	left: 32vw;	
}

/*--サイエンスフェスタ(タブレット・縦)--*/
.g4-sci {
	width: 28vw;
	top: 53vh;
	left: 69vw;	
}

/*--遊具１（まわるやつ）(タブレット・縦)--*/
.g4-yuugu1 {
	width: 22vw;
	top: 72vh;
	left: 5vw;	
}

/*--遊具２（マット）(タブレット・縦)--*/
.g4-yuugu2 {
	width: 22vw;
	top: 74vh;
	left: 26vw;	
}

/*--かめまるらんど(タブレット・縦)--*/
.g4-kamemaru {
	width: 38vw;
	top: 70vh;
	left: 59vw;	
}


/*--ゴール４文章--*/
/*--私たちの生産拠点のある(タブレット・縦)--*/
.g4 .sec1{
	width: 95vw;
	top: 0.5vh;
	left: 2.5vw;
}

/*--亀岡工場では人にやさしい(タブレット・縦)--*/
.g4 .sec2{
	width: 95vw;
	top: 31vh;
	left: 2.5vw;
}

/*--事業の節目を記念して(タブレット・縦)--*/
.g4 .sec3{
	top: 40vh;
	left: 2.5vw;
}

/*--亀岡市の子育て支援の(タブレット・縦)--*/
.g4 .sec4{
	width: 26vw;
	top: 45.5vh;
	left: 3vw;
}

/*--輝かしい未来を担う(タブレット・縦)--*/
.g4 .sec5{
	width: 45vw;
	top: 45.5vh;
	left: 52vw;
}

/*--天候を気にせず遊べる未就学児向け(タブレット・縦)--*/
.g4 .sec6{
	width: 82vw;
	top: 67.5vh;
	left: 3vw;
}


/*--g4 span(文字)(タブレット・縦)--*/
/*--KIRIN no KO--*/
.g4-kosodate {
	top: 17vw;
	left: 3vw;
}
.g4-kosodate.active {
	transform: scale(1);
	opacity: 1;
}


/*--熱気球体験フライト(タブレット・縦)--*/
.g4-bal {
	top: 43.5vh;
	left: 3vw;
}

/*--サイエンスフェスタ（タイトル）(タブレット・縦)--*/
.g4-fes {
	top: 43.5vh;
	left: 52vw;
}

/*--こどものあそびひろば（タイトル）(タブレット・縦)--*/
.g4-play {
	top: 65.5vh;
	left: 3vw;
}
.g4-play.active {
	transform: scale(1);
	opacity: 1;
}
/*-------------------------------------*/


/*********************************************/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール５(タブレット・縦)--*/

/*--ゴール４文章--*/
/*--私たちの生産拠点のある--*/


/*--横線--*/
.g5-1-line-yoko1{
	top: 26vw;
	left: 0vw;
	z-index: 1;
}


/*--gif画像--*/
/*--人々(タブレット・縦)--*/
.g5-1-people{
	width: 55vw;
	top: 0;
	left: 45vw;
}
.g5-2-3per.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--矢印(スマートフォン・縦)--*/
.g5-1-arrow{
	width: 8vw;
	top: 22.7vh;
	left: 36vw;
}

/*--bbq(スマートフォン・縦)--*/
.g5-1-bbq{
	width: 25vw;
	top: 22vh;
	left: 69vw;
}

/*--G5円グラフ(タブレット・縦)--*/
.g5-1-graph{
	width: 63vw;
	top: 38.5vh;
	left: 18.5vw;
}

/*--階段(スマートフォン・縦)--*/
.g5-1-step{
	width: 90vw;
	top: 63vh;
	left: 3vw;
}




/*--ゴール５文章(スマートフォン・縦)--*/
.g5-1 .sec1{
	width: 45vw;
	top: 2.1vh;
	left: 2vw;
}

/*--背景色のある四角形(タブレット・縦)--*/
.g5-1 .square1{
	width: 30vw;
}
.g5-1 .sq-position1 {
	top: 20vh;
	left: 5vw;
}

.g5-1 .square2{
	width: 48vw;
	height: 15vh;
	padding: 1vw;
	font-size:x-small;
}
.g5-1 .sq-position2 {
	top: 20vh;
	left: 50vw;
}

/*--就労は、単に収入を得る(タブレット・縦)--*/
.g5-1 .sec4 span{
	position: absolute;
	width: 45vw;
	top: -4vh;
	left: -11vw;
	text-shadow:2px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF,  0 -1px 0 #FFF,
	-1px 0 0 #FFF, 1px 0 0 #FFF;
}

/*--男女雇用機会均等法が(タブレット・縦)--*/
.g5-1 .sec2 {
	width: 24vw;
	top: 73vh;
	left: 6vw;
	font-size: 3% !important;
}

/*--亀岡工場での統計においては、(タブレット・縦)--*/
.g5-1 .sec3 {
	width: 24vw;
	top: 66vh;
	left: 72vw;
	font-size: x-large;
}

/*--g5 span(文字)(タブレット・縦)--*/
/*--亀岡工場の(・縦)---*/
.g5-1-koujyouno{
	top: 37.1vh;
	left: 43.8vw;
}

/*--女性の割合(・縦)---*/
.g5-1-ratio{
	top: 40.2vh;
	left: 39.9vw;
}

/*--約8%(タブレット・縦)--*/
.g5-1-8{
	top: 52vh;
	left: 26.5vw;
}

/*--2002年(タブレット・縦)--*/
.g5-1-2002{
	top: 60vh;
	left: 24.2vw;
}

/*--約20%(タブレット・縦)--*/
.g5-1-20{
	top: 52vh;
	left: 63vw;
}

/*--現在（2023）(タブレット・縦)--*/
.g5-1-gen{
	top: 60vh;
	left: 66.2vw;
}


/*--子育て期の(・縦)---*/
.g5-1-kosodate{
	width: 20vw;
	top: 65vh;
	left: 6vw;
}

/*--働く女性の(・縦)---*/
.g5-1-hataraku{
	width: 24vw;
	top: 77vh;
	left: 72vw;
}
/*********************************************/



/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール５－２(タブレット・縦)--*/

/*--ゴール５-２文章--*/
/*--背景色のある四角形(タブレット・縦)--*/
.g5-2 .square1{
	width: 25vw;
	height: 12vh;
	padding: 1vw;
	font-size:medium;
	
}
.g5-2 .sq-position1 {
	top: 12.5vh;
	left: 3vw;
}

.g5-2 .square2{
	width: 38vw;
	height: 5vw;
	padding: 0.5vw;
}
.g5-2 .sq-position2{
	top: 33.4vh;
	left: 56vw;
}


/*--g5-2 span(文字)--*/
/*--気分が優れない(タブレット・縦)--*/
.g5-2-kibunga {
	top: 10vh;
	left: 28vw;
}

/*--30～50代の女性(タブレット・縦)--*/
.g5-2-30-50 {
	top: 9vh;
	left: 3vw;
}

/*--93%(スマートフォン・縦)--*/
.g5-2-93 {
	font-size: medium;
	top: 8vh;
	left: 67vw;
}

/*--29～49歳(タブレット・縦)--*/
.g5-2-29-49 {
	top: 27vh;
	left: 3vw;
}

/*--約８割は(タブレット・縦)--*/
.g5-2-8wari {
	display: none;
	top: 33vh;
	left: 36vw;
}

/*--女性特有の(スマートフォン・縦)--*/
.g5-2-tokuyuu {
	top: 43.5vh;
	left: 28vw;
}




/*--gif画像--*/
/*--G5-2棒グラフ(タブレット・縦)--*/
.g5-2-graph{
	width: 27vw;
	top: 9.7vh;
	left: 39vw;
}

/*--３人(タブレット・縦)--*/
.g5-2-3per{
	width: 28vw;
	top: 10vh;
	left: 70vw;
}

/*--２人(タブレット・縦)--*/
.g5-2-2per{
	width: 23vw;
	top: 32vh;
	left: 3vw;
}

/*--生薬(タブレット・縦)--*/
.g5-2-crude{
	width: 90vw;
	top: 40.5vh;
	left: 4.5vw;
}

/*--fight(タブレット・縦)--*/
.g5-2-fight{
	width: 10vw;
	top: 70vh;
	left: 77vw;
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール７－１(タブレット・縦)--*/


/*--gif画像--*/
/*--NOx(タブレット・縦)--*/
.g7-1-nox{
	width: 29vw;
	top: 8vh;
	left: 1vw;
}

/*-- 車(タブレット・縦)--*/
.g7-1-car1 {
	width: 70vw;
	top: 17.5vh;
	left: 28vw;
	transform: scaleX(-1);
}
.g7-1-car1.active {
	transform: scaleX(-1);
	opacity: 1;
}

.g7-1-car2 {
	width: 30vw;
	top: 23.5vh;
	left: 4vw;
}

.g7-1-car3 {
	width: 30vw;
	top: 7vh;
	left: 58vw;
}


/*--co2(雲)(タブレット・縦)--*/
.g7-1-co2{
	width: 45vw;
	top: 43.5vh;
	left: 2vw;
}

/*--ガスメーター(タブレット・縦)--*/
.g7-1-gas{
	width: 47vw;
	top: 44vh;
	left: 47vw;
}

/*--原料生薬(タブレット・縦)--*/
.g7-1-crude{
	width: 30vw;
	top: 67vh;
	left: 60vw;
}

/*--画面右側の森林(タブレット・縦)--*/
.g7-1-forest{
	width: 27vw;
	top: 64vh;
	left: 72vw;
}


/*--ゴール７-１文章(タブレット・縦)--*/
/*--地球温暖化の歯止め担うことは、(タブレット・縦)--*/
.g7-1 .sec3 {
	width: 53vw;
	top: 71.5vh;
	left: 3vw;
}



/*--g7-1 span(文字)(タブレット・縦)--*/
/*--窒素酸化物--*/
.g7-1-osen {
	top: 14vh;
	left: 31vw;
	font-size: large;
}

/*--排出削減（上）(タブレット・縦)--*/
.g7-1-sakugen1 {
	top: 7.4vh;
	left: 7vw;
}

/*--排出削減（下）(タブレット・縦)--*/
.g7-1-sakugen2 {
	top: 64.3vh;
	left: 18.5vw;
	font-size: medium;
}

/*--ガスco2(タブレット・縦)--*/
.g7-1-gas-co2 {
	top: 47.5vh;
	left: 77vw;
}

/*--約25%(タブレット・縦)--*/
.g7-1-25 {
	top: 50.5vh;
	left: 75.4vw;
}

/*--削減3(タブレット・縦)--*/
.g7-1-sakugen3 {
	top: 54vh;
	left: 78vw;
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール７－１(タブレット・縦)--*/

/*--ゴール７-２文章--*/
/*--亀岡工場では(タブレット・縦)--*/
.g7-2 .sec2 {
	width: 25vw;
	top: 8vh;
	left: 67vw;
}

/*--工場全域に芝生緑化(タブレット・縦)--*/
.g7-2 .sec3 {
	width: 94.5vw;
	top: 27vh;
	left: 2vw;
}


/*--環境緑化への取組み －(タブレット・縦)--*/
.g7-2 .sec4 {
	width: 45vw;
	top: 35vh;
	left: 50vw;
}

/*--私たちは、(タブレット・縦)--*/
.g7-2 .sec5 {
	width: 50vw;
	top: 78.5vh;
	left: 44vw;
}



/*--gif画像--*/
/*--ピーク(タブレット・縦)--*/
/*--G7-2--*/
.g7-2-peak{
	width: 45vw;
	top: 4.5vh;
	left: 7vw;
}

/*--屋上温度グラフ(タブレット・縦)--*/
.g7-2-graph{
	width: 40vw;
	top: 48vh;
	left: 52vw;
}

/*--管理棟(タブレット・縦)--*/
.g7-2-kanri-2{
	width: 35vw;
	top: 62.5vh;
	left: 5vw;
}

/*--屋上緑化(・縦)-*/
.g7-2-yane{
	width: 53vw;
	top: 68vh;
	left: 41vw;
}

/*--桜と銀杏の枝(タブレット・縦)--*/
.g7-2-green{
	width: 17vw;
	top: 36vh;
	left: 28vw;
}

/*--御堂筋(タブレット・縦)--*/
.g7-2-namiki{
	width: 45vw;
	top: 36vh;
	left: 2vw;
}


/*--g7-2 span(文字)--*/
/*--集中可動(タブレット・縦)--*/
.g7-2-syu {
	top: 7vh;
	left: 12.5vw;
}

/*--分散可動(タブレット・縦)--*/
.g7-2-bun {
	top: 7vh;
	left: 33vw;
}

/*--23%(タブレット・縦)--*/
.g7-2-23 {
	top: 18.5vh;
	left: 23.5vw;
}

/*--45%(タブレット・縦)--*/
.g7-2-45 {
	top: 18.5vh;
	left: 34vw;
}

/*--ピークカット(タブレット・縦)--*/
.g7-2-cut {
	top: 10.8vh;
	left: 41.8vw;
}

/*--45.9%(タブレット・縦)--*/
.g7-2-max45 {
	top: 10.5vh;
	left: 52vw;
}

/*--ピークシフト(タブレット・縦)--*/
.g7-2-shift {
	top: 17.8vh;
	left: 41.8vw;
}

/*--夏季日中屋上温度(タブレット・縦)--*/
.g7-2-summer {
	top: 48vh;
	left: 58vw;
	font-size: medium;
}

/*--最大約60℃(タブレット・縦)--*/
.g7-2-max60 {
	top: 48vh;
	left: 77.8vw;
	font-size: medium;
}

/*--最大約30℃(タブレット・縦)--*/
.g7-2-max30 {
	top: 55.7vh;
	left: 77.8vw;
	font-size: medium;
}

/*--約３０℃低(タブレット・縦)--*/
.g7-2-30 {
	top: 58vh;
	left: 61vw;
	font-size: medium;
}

/*--緑化なし(タブレット・縦)--*/
.g7-2-false {
	top: 65.7vh;
	left: 54.6vw;
	font-size: medium;
}

/*--緑化あり(タブレット・縦)--*/
.g7-2-true {
	top: 65.7vh;
	left: 70.3vw;
	font-size: medium;
}

/*--雨水循環(タブレット・縦)--*/
.g7-2-usui {
	top: 61vh;
	left: 11vw;
}

/*--ヒートアイランド(タブレット・縦)--*/
.g7-2-heat {
	top: 67vh;
	left: 11vw;
}

/*--緑化土壌による断熱と蒸散(タブレット・縦)--*/
.g7-2-dojo {
	top: 68.5vh;
	left: 50vw;
}

/*--夏季：２～３℃低(タブレット・縦)--*/
.g7-2-2-3 {
	top: 70.7vh;
	left: 57.2vw;
}

/*--冬季：１～２℃高(タブレット・縦)--*/
.g7-2-1-2 {
	top: 72.2vh;
	left: 57.2vw;
}

/*--冷暖房エネルギーの削減(タブレット・縦)--*/
.g7-2-reidan {
	top: 73.7vh;
	left: 58.8vw;
}




/*ボタンの設定*/
.pagetop a {
	right: 5vw;		/*右からの配置場所指定*/
	bottom: 5vw;		/*下からの配置場所指定*/
	font-size: 1.4em;	/*文字サイズ*/
	width: 7vw;		/*幅*/
	line-height: 7vw;	/*高さ*/
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール７－３(タブレット・縦)--*/

/*--ゴール７-３文章--*/
/*--導入後の実績に基づいた(ン・縦)--*/
.g7-3 .sec2 {
	width: 20vw;
	top: 18.5vh;
	left: 42vw;
}


/*--亀岡工場の銀杏は５０本、(タブレット・縦)--*/
.g7-3 .sec3 {
	width: 20vw;
	top: 29vh;
	left: 42vw;
}

/*--導入後の実績に基づいた(タブレット・縦)--*/
.g7-3 .sec5 {
	width: 22vw;	
	top: 65vh;
	left: 2.5vw;
}

/*--「エネルギーをみんなにそしてクリーンに」(タブレット・縦)--*/
.g7-3 .sec6 {
	width: 55vw;
	top: 76vh;
	left: 2.5vw;
}



/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--gif画像--*/
/*--地中熱空調(タブレット・縦)--*/
.g7-3-hyb{
	width: 50vw;
	top: 9vh;
	left: 5vw;
}


/*--工場全体(タブレット・縦)--*/
.g7-3-plant{
	width: 26vw;
	top: 26vh;
	left: 8vw;
}

/*--カッコ線(タブレット・縦)--*/
.g7-3-line{
	width: 4vw;
	top: 17.5vh;
	left: 63vw;
}

/*--銀杏(タブレット・縦)--*/
.g7-3-gink{
	width: 20vw;
	top: 10.5vh;
	left: 72.5vw;
}

/*--森林(タブレット・縦)--*/
.g7-3-forest{
	width: 22vw;
	top: 48.5vh;
	left: 1vw;
}

/*--パネル(タブレット・縦)--*/
.g7-3-panel{
	width: 33vw;
	top: 57vh;
	left: 27vw;
}

/*--ポリタンク・縦)--*/
.g7-3-tank{
	width: 25vw;
	top: 45vh;
	left: 65vw;
}

/*--上呂(タブレット・縦)--*/
.g7-3-jyo{
	width: 22vw;
	top: 48vh;
	left: 28vw;
}


/*--チューブ（ポリタンクの）(タブレット・縦)--*/
.g7-3-tube{
	width: 12vw;
	top: 47vh;
	left: 51vw;
}

/*--電源コード(タブレット・縦)--*/
.g7-3-code{
	width: 33vw;
	top: 70vh;
	left: 27vw;
}


/*--研究棟(タブレット・縦)--*/
.g7-3-labo{
	width: 35vw;
	top: 66vh;
	left: 64vw;
}

/*--ストライプ文字背景（左）(タブレット・縦)--*/
.g7-3 .position1 {
	width: 33vw;
	top: 45.4vh;
	left: 0.2vw;
}

/*--ストライプ文字背景（右）(タブレット・縦)--*/
.g7-3 .position2 {
	width: 32vw;
	top: 54vh;
	left: 62vw;
}



/*--g7-3 span(文字)(タブレット・縦)--*/
/*--地中熱空調--*/
.g7-3-chityuu {
	top: 16vh;
	left: 8.5vw;
}

/*--３６ＭＴ/年 ＣＯ2(タブレット・縦)--*/
.g7-3-36co2 {
	top: 21vh;
	left: 8vw;
	font-size: medium;
}



/*--銀杏５０(タブレット・縦)--*/
.g7-3-tree50 {
	top: 24.5vh;
	left: 7.7vw;
	font-size: medium;
}

/*--３ＭＴＣＯ２(タブレット・縦)--*/
.g7-3-3co2 {
	top: 26vh;
	left: 8.5vw;
	font-size: medium;
}



/*--銀杏６００本(タブレット・縦)--*/
.g7-3-600 {
	top: 19vh;
	left: 74.5vw;
}

/*--森林換算(タブレット・縦)--*/
.g7-3-conv1 {
	width: 28vw;
	top: 44.9vh;
	left: 2vw;
}

/*--１８Lポリタンク(タブレット・縦)--*/
.g7-3-18L {
	top: 45vh;
	left: 80.2vw;
}


/*--石油換算(タブレット・縦)--*/
.g7-3-conv2 {
	top: 54vh;
	left: 64vw;
}


/*--太陽光発電(タブレット・縦)--*/
.g7-3-sun {
	top: 67vh;
	left: 66vw;
}

/*--７ＭＴ/年 ＣＯ2(タブレット・縦)--*/
.g7-3-7co2 {
	top: 71vh;
	left: 64vw;
}
/*********************************************/



/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール７－４(タブレット・縦)--*/

/*--より濃いエキスでCO2排出削減--*/
.g7-4-sec1 {
	top: 0.5vw;
	left: 3vw;
}

/*--例えば、ドリンク剤に使用される原料(タブレット・縦)--*/
.g7-4-sec2 {
	width: 60vw;
	top: 0.5vh;
	left: 38vw;
}

/*--例１.(タブレット・縦)--*/
.g7-4-sec3 {
	top: 8.5vh;
	left: 59vw;
	transform: scale(1.5) !important;	
}

/*--例２.(タブレット・縦)--*/
.g7-4-sec4 {
	top: 8.5vh;
	left: 73vw;
	transform: scale(1.5) !important;	
}

/*--原料生薬１００ｋｇを、同一の抽出溶媒 ＋ 同一の抽出方法に(タブレット・縦)--*/
.g7-4-sec5 {
	width: 65vw;
	top: 15.5vh;
	left: 2vw;
}

/*--対応比は当社の標準製造法に基づくエキス収率(タブレット・縦)--*/
.g7-4-sec6 {
	top: 18.5vh;
	left: 58vw;
	transform: scale(1.2) !important;	
}

/*--横線１(スマートフォン・縦)--*/
.g7-4-line-yoko1{
	top: 29.2vw;
	left: 0vw;
	z-index: 1;
}




/*--gif画像--*/
/*--CO2(タブレット・縦)--*/
.g7-4-co2{
	width: 23vw;
	top: 1.5vh;
	left: 7vw;
}

/*--測り(タブレット・縦)--*/
.g7-4-w-scale{
	width: 12vw;
	top: 10.5vh;
	left: 83vw;
}

/*--コウジン(タブレット・縦)--*/
.g7-4-koujin{
	width: 8vw;
	top: 10vh;
	left: 37vw;
}

/*--ボタンピ(タブレット・縦)--*/
.g7-4-botanpi{
	width: 8vw;
	top: 11vh;
	left: 50vw;
}

/*--↓の矢印(左)(タブレット・縦)--*/
.g7-4-ar1-position1{
	width: 3vw;
	top: 25.8vh;
	left: 30.8vw;
	transform: rotate(-90deg);
}

/*--↓の矢印(右)(タブレット・縦)--*/
.g7-4-ar1-position2{
	width: 3vw;
	top: 25.8vh;
	left: 65vw;
	transform: rotate(-90deg);
}



/*--抽出〇(タブレット・縦)--*/
.g7-4-ext2{
	width: 19vw;
	top: 20vh;
	left: 5vw;
}

/*--横の太い縞矢印(左)(タブレット・縦)--*/
.g7-4-ar2-position1{
	width: 22vw;
	top: 32vh;
	left: 4vw;
	transform: rotate(90deg);
}


/*--流エキス(タブレット・縦)--*/
.g7-4-lx{
	width: 13vw;
	top: 44.5vh;
	left: 9.5vw;
}


/*--４重の太い縞矢印(左)(タブレット・縦)--*/
.g7-4-ar3-position1{
	width: 10vw;
	top: 59vh;
	left: 11vw;
	transform: rotate(90deg);
}


/*--円グラフ(左)(タブレット・縦)--*/
.g7-4-cir-lx{
	width: 26vw;
	top: 65.5vh;
	left: 3vw;
}



/*--濃縮〇(タブレット・縦)--*/
.g7-4-con{
	width: 19vw;
	top: 20vh;
	left: 39.5vw;
}


/*--横の太い縞矢印(中央)(タブレット・縦)--*/
.g7-4-ar2-position2{
	width: 22vw;
	top: 32vh;
	left: 38vw;
	transform: rotate(90deg);
}


/*--軟エキス(タブレット・縦)--*/
.g7-4-sx{
	width: 19vw;
	top: 42vh;
	left: 43vw;
}


/*--４重の太い縞矢印(中央)(タブレット・縦)--*/
.g7-4-ar3-position2{
	width: 10vw;
	top: 59vh;
	left: 45vw;
	transform: rotate(90deg);
}

/*--円グラフ(中央)(タブレット・縦)--*/
.g7-4-cir-sx{
	width: 26vw;
	top: 65.5vh;
	left: 37vw;
}



/*--噴霧乾燥〇(タブレット・縦)--*/
.g7-4-spr{
	width: 19vw;
	top: 20vh;
	left: 73.8vw;
}

/*--横の太い縞矢印(右)(タブレット・縦)--*/
.g7-4-ar2-position3{
	width: 22vw;
	top: 32vh;
	left: 72vw;
	transform: rotate(90deg);
}

/*--乾燥エキス(タブレット・縦)--*/
.g7-4-dx{
	width: 22vw;
	top: 47vh;
	left: 72.5vw;
}

/*--４重の太い縞矢印(右)(タブレット・縦)--*/
.g7-4-ar3-position3{
	width: 10vw;
	top: 59vh;
	left: 78.7vw;
	transform: rotate(90deg);
}

/*--円グラフ(右)(タブレット・縦)--*/
.g7-4-cir-dx{
	width: 26vw;
	top: 65.5vh;
	left: 70.3vw;
}


/*--g7-4 span(文字)--*/
/*--例１コウジン
	例２ボタンピ(タブレット・縦)--*/
.g7-4-ex {
	top: 7.5vh;
	left: 39vw;
	font-size: medium;
}

/*--１００ｋｇ(タブレット・縦)--*/
.g7-4-100kg {
	top: 3.5vh;
	left: 81vw;
	font-size: medium !important;	
}

/*--液体から(タブレット・縦)--*/
.g7-4-dilu {
	top: 33vh;
	left: 29vw;
}

/*--抽出（工程）(タブレット・縦)--*/
.g7-4-extr {
	top: 34vh;
	left: 11.45vw;
}

/*--濃縮（工程）(タブレット・縦)--*/
.g7-4-conce {
	top: 34vh;
	left: 45.3vw;	
}

/*--乾燥（工程）(タブレット・縦)--*/
.g7-4-sp {
	top: 34vh;
	left: 79.2vw;	
}


/*--１００L(タブレット・縦)--*/
.g7-4-100L {
	top: 44vh;
	left: 2vw;	
}

/*--２０ｋｇ(タブレット・縦)--*/
.g7-4-20kg {
	top: 44vh;
	left: 36vw;	
}

/*--１０ｋｇ(タブレット・縦)--*/
.g7-4-10kg {
	top: 44vh;
	left: 70vw;	
}

/*--コウジン流エキス、ボタンピ流エキス(タブレット・縦)--*/
.g7-4-koujin-lx {
	top: 48vh;
	left: 9.2vw;
	transform: scale(1.5) !important;		
}

/*--ボタンピ軟エキス(タブレット・縦)--*/
.g7-4-botanpi-sx {
	top: 48.5vh;
	left: 43.7vw;	
	transform: scale(1.5) !important;		
}

/*--コウジン乾燥エキス(タブレット・縦)--*/
.g7-4-koujin-dx {
	top: 48.5vh;
	left: 76.5vw;	
	transform: scale(1.5) !important;		
}


/*--１：１(タブレット・縦)--*/
.g7-4-1-1 {
	top: 55.5vh;
	left: 9vw;	
	transform: scale(1.5) !important;
}
.g7-4-1-1.active {
	transform: translateY(2vw);
	opacity: 0.8;
}

/*--５：１・縦)--*/
.g7-4-5-1 {
	top: 55.5vh;
	left: 43.5vw;
	transform: scale(1.5) !important;	
}
.g7-4-5-1.active {
	transform: translateY(2vw);
	opacity: 0.8;
}

/*--１０：１(タブレット・縦)--*/
.g7-4-10-1 {
	top: 55.5vh;
	left: 76.2vw;
	transform: scale(1.5) !important;	
}
.g7-4-10-1.active {
	transform: translateY(2vw);
	opacity: 0.8;
}


/*--ＣＯ２　０.５０t(タブレット・縦)--*/
.g7-4-050t {
	top: 70vh;
	left: 10.7vw;
	line-height: 3vh;
}
/*--ＣＯ２　０.３４t(タブレット・縦)--*/
.g7-4-034t {
	top: 70vh;
	left: 44.8vw;	
	line-height: 3vh;
}

/*--ＣＯ２　０.３８t(タブレット・縦)--*/
.g7-4-038t {
	top: 70vh;
	left: 78.5vw;	
	line-height: 3vh;
}



/*--0.5t(100L)×100L/100L＝0.50ｔ(タブレット・縦)--*/
.g7-4-cal050 {
	display: none !important;
}

/*--1.7t(100kg)×20kg/100kg＝0.34ｔ(タブレット・縦)--*/
.g7-4-cal034{
	display: none !important;
}

/*--3.8t(100kg)×10kg/100kg＝0.38ｔ(タブレット・縦)--*/
.g7-4-cal038{
	display: none !important;
}


/*--１００％(タブレット・縦)--*/
.g7-4-100 {
	top: 80vh;
	left: 7.5vw;
	line-height: 3vh;
}

/*--３２％(タブレット・縦)--*/
.g7-4-32 {
	top: 80vh;
	left: 44vw;
	line-height: 3vh;
}

/*--２４％(タブレット・縦)--*/
.g7-4-24 {
	top: 80vh;
	left: 77.8vw;
	line-height: 3vh;
}
/*********************************************/

/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール８(タブレット・縦)--*/

/*--横線１(タブレット・縦)--*/
.g8-line-yoko1{
	top: 16vw;
	left: 0vw;
	z-index: 1;
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G8 地元雇用の割合(タブレット・縦)--*/
.g8-koyou{
	width: 90vw;
	top: 14vh;
	left: 4.5vw;
}

/*--G8 1990年(タブレット・縦)--*/
.g8-1990{
	width: 48vw;
	top: 55vh;
	left: 2vw;
}
/*--G8 2023年(タブレット・縦)--*/
.g8-2023{
	width: 48vw;
	top: 52.15vh;
	left: 50vw;
}



/*--g8 span(文字)(タブレット・縦)--*/
/*--亀岡工場の(ン・縦)--*/
.g8-kameoka {
	top: 11vh;
	left: 40.3vw;	
}

/*--地域従業員(タブレット・縦)--*/
.g8-chiiki {
	top: 16.8vh;
	left: 34.3vw;	
}

/*--約39%(タブレット・縦)--*/
.g8-39{
	top: 33.2vh;
	left: 12.7vw;
}

/*--約2002年(タブレット・縦)--*/
.g8-2002{
	top: 38.2vh;
	left: 12.6vw;
}

/*--約60%(タブレット・縦)--*/
.g8-60{
	top: 33.2vh;
	left: 68.7vw;
}

/*--現在（2023）(タブレット・縦)--*/
.g8-gen{
	top: 38.2vh;
	left: 72.5vw;
}

/*--亀岡工場：1990年(タブレット・縦)--*/
.g8-k1990 {
	top: 56vh;
	left: 2.2vw;

}

/*--亀岡工場：現在(タブレット・縦)--*/
.g8-now {
	top: 80.5vh;
	left: 54.5vw;
}


/*--事業の発展≒地域雇用の拡充(タブレット・縦)--*/
.g8-deve {
	top: 58vh;
	left: 55.5vw;	
}
/*********************************************/

/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール９(タブレット・縦)--*/
/*--亀岡工場は東西と南北に(タブレット・縦)--*/
.g9-sec1{
	width: 38vw;
	top: 0.5vh;
	left: 4vw
}

/*--全工程に同等(タブレット・縦)--*/
.g9-sec2{
	width: 38vw;
	top: 27vh;
	left: 4vw
}

/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G9 配置図(タブレット・縦)--*/
.g9-haichi{
	width: 85vw;
	top: -1vh;
	left: 7.5vw;
}


/*--第１第２(タブレット・縦)--*/
.g9-1and2{
	width: 95vw;
	top: 29vh;
	left: 2vw;
}

/*--抽出（１－２の間）(タブレット・縦)--*/
.g9-ext2{
	width: 15vw;
	top: 32vh;
	left: 41.8vw;
}


/*--横線(タブレット・縦)--*/
.g9-line-yoko1{
	top: 45.5vh;
	left: 0;
}


/*--横線（太）(タブレット・縦)--*/
.g9-line-yoko2{
	top: 63.5vh;
	left: 50%; /* 要素の左側を中心に配置 */
	width: 0;	/*--伸びる前の幅を指定します--*/
	height: 2px !important;
    transform: translateX(-71%); /* 中心揃え */
}
.g9-line-yoko2.active {
    width: 65%; /*--線が中心から左右に伸びる幅を指定します--*/
}

/*--縦線３（太）(タブレット・縦)--*/
.g9-line-tate3{
	top: 63.5vh;
	left: 25vw;
	width: 2px;
	transform: translateY(-50%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 3s;
	animation-name: expandHeight2; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

/*--縦線４（太）(タブレット・縦)--*/
.g9-line-tate4{
	top: 63.5vh;
	left: 47.5vw;
	width: 2px;
	transform: translateY(-50%); /* 中心揃えのために要素の半分だけ上に移動 */
	animation-duration: 3s;
	animation-name: expandHeight2; /* アニメーションの名前と時間を1秒に変更 */
	animation-fill-mode: forwards;
}

@keyframes expandHeight2 {
	from {
	  height: 0px; /* 開始時の高さ */
	}
	to {
	  height: 360px; /* 終了時の高さ */
	}
}





/*--原料管理(タブレット・縦)--*/
.g9-mate{
	width: 20vw;
	top: 46vh;
	left: 2vw;
}

/*--抽出(タブレット・縦)--*/
.g9-ext{
	width: 20vw;
	top: 46vh;
	left: 26.4vw;
}

/*--濃縮(タブレット・縦)--*/
.g9-con{
	width: 20vw;
	top: 46vh;
	left: 51vw;
}

/*--噴霧(タブレット・縦)--*/
.g9-spr{
	width: 20vw;
	top: 66.5vh;
	left: 2vw;
}

/*--製剤(タブレット・縦)--*/
.g9-phar{
	width: 20vw;
	top: 66.5vh;
	left: 26.4vw;
}

/*--製品(タブレット・縦)--*/
.g9-prod{
	width: 20vw;
	top: 66.5vh;
	left: 51vw;
}

/*--線と点(タブレット・縦)--*/
.g9-dots-line{
	width: 24vw;
	top: 50.5vh;
	left: 72vw;
}

/*--作業員(タブレット・縦)--*/
.g9-ope{
	width: 14vw;
	top: 66vh;
	left: 84vw;
	transform: scaleX(1) !important;	/*--左右反転--*/
}
.g9-ope.active {
    transform: translateX(2vw);
    opacity: 1;
}

/*--火災(タブレット・縦)--*/
.g9-fire{
	width: 6vw;
	top: 51vh;
	left: 73vw;	
}

/*--ぐるぐる矢印(タブレット・縦)--*/
.g9-cir{
	width: 8vw;
	top: 75vh;
	left: 73vw;	
}


/*--g9 span(文字)--*/
/*--バックアップ（抽出）--*/
.g9-back {
	display: none !important;
}


/*--独立化(タブレット・縦)--*/
.g9-inde {
	top: 82vh;
	left: 10vw;	
}
.g9-inde.active {
	transform: translateY(-2vw);
	opacity: 1;
}

/*--万一の火災でも(タブレット・縦)--*/
.g9-kasai {
	top: 48vh;
	left: 68vw;
	font-size: medium;
}

/*--延焼は無(タブレット・縦)--*/
.g9-ensyou {
	top: 53.3vh;
	left: 77vw;
	font-size: medium;
}
.g9-ensyou.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--全ての工程に(タブレット・縦)--*/
.g9-all {
	top: 57vh;
	left: 68vw;	
	font-size: medium;
}

/*--強靭なインフラ構築(タブレット・縦)--*/
.g9-strong {
	width: 10vw;
	top: 67vh;
	left: 78.2vw;
	font-size: medium;
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール１２(タブレット・縦)--*/

/*--万一のロックダウン(タブレット・縦)--*/
.g12-sec2{
	width: 95vw;
	top: 63vh;
	left: 2vw
}

/*--働き方改革(スマートフォン・縦)--*/
.g12-sec3{
	display: none !important;
}

/*--社内ネットワークやサテライト(スマートフォン・縦)--*/
.g12-sec4{
	display: none !important;
	
	width: 95vw;
	top: 68vh;
	left: 2vw
}


/*--g12 span(文字)--*/
/*--亀岡工場 管理棟(タブレット・縦)--*/
.g12-kame-kan {
	top: 17.7vh;
	left: 13vw;	
}
.g12-kame-kan.active {
	transform: translateY(-2vw);
	opacity: 0.8;
}

/*--道修町 本社(タブレット・縦)--*/
.g12-dosho-head {
	top: 17.7vh;
	left: 69vw;	
}
.g12-dosho-head.active {
	transform: translateY(-2vw);
	opacity: 0.8;
}

/*--取引先(タブレット・縦)--*/
.g12-sei-han {
	top: 55vh;
	left: 36.5vw;	
	transform: scale(1.7)  !important;
}

/*--受注・生産・出荷(タブレット・縦)--*/
.g12-jyu-sei {
	top: 32vh;
	left: 43.5vw;	
}

/*--２拠点化(タブレット・縦)--*/
.g12-2kyoten {
	top: 68.9vh;
	left: 74vw;	
}

/*--重要な業務を(タブレット・縦)--*/
.g12-impor {
	top: 73vh;
	left: 68vw;	
}

/*--効率化・生産性の向上(タブレット・縦)--*/
.g12-kouritsu {
	top: 76vh;
	left: 78vw;	
}

/*--大規模な災害時などの(タブレット・縦)--*/
.g12-daikibo {
	top: 78.4vh;
	left: 68vw;	
}

/*--受注や問合せ、渉外対応(タブレット・縦)--*/
.g12-ser {
	top: 83vh;
	left: 75.4vw;	
}

/*--縦・横　線(タブレット・縦)--*/
/*--横線３(タブレット・縦)--*/
.g12-line-yoko3{
	top: 62.2vh;
	left:0vw;
}


/*--gif画像--*/
/*--G12--*/
/*--管理棟(タブレット・縦)--*/
.g12-kanri {
	width: 30vw;
	top: 3vh;
	left: 5vw;	
}

/*--head（本社）(タブレット・縦)--*/
.g12-head {
	width: 30vw;
	top: 3vh;
	left: 65.5vw;	
}
.g12-head.active {
	transform: translateX(-2vw);
	opacity: 1;
}

/*--ねじれ矢印(タブレット・縦)--*/
.g12-arrow {
	width: 10vw;
	top: 8vh;
	left: 45vw;	
	transform: rotate(90deg) !important;
}
.g12-arrow.active {
	transform: rotate(90deg) !important;
	transform: translateY(2vw);
	opacity: 1;
}

/*--分岐(タブレット・縦)--*/
.g12-arrow2 {
	display: none !important;
}

.g12-arrow2-90deg{
	position: absolute;
	width: 95vw;
	height: 40vh;
	top: 17vh;
	left: 2vw;
}

/*--工程(タブレット・縦)--*/
.g12-koutei {
	width: 25vw;
	top: 20.2vh;
	left: 12vw;	
}

/*--生産（受発注）(タブレット・縦)--*/
.g12-seisan {
	width: 28vw;
	top: 21.2vh;
	left: 63vw;	
}

/*--顧客(タブレット・縦)--*/
.g12-cus1, .g12-cus2, .g12-cus3, .g12-cus4 {
	width: 9vw;
}
.g12-cus1{
	top: 52.5vh;
	left: 4vw;	
}
.g12-cus2 {
	top: 57vh;
	left: 21.9vw;	
}
.g12-cus3 {
	top: 57vh;
	left: 57.2vw;	
}
.g12-cus4 {
	top: 54.5vh;
	left: 86.5vw;	
}
.g12-cus5 {
	width: 10vw;
	top: 79vh;
	left: 38vw;	
}

/*--ネットワーク(タブレット・縦)--*/
.g12-net {
	width: 40vw;
	top: 70vh;
	left: 5vw;	
}

.g12-desk {
	display: block !important;	/*--再表示--*/
	width: 13vw;
	top: 67vh;
	left: 51vw;	
}

/*--2拠点(タブレット・縦)--*/
.g12-2points {
	width: 13vw;
	top: 78vh;
	left: 4vw;	
}
.g12-2points.active {
	transform: translateX(2vw);
	opacity: 1;
}

/*--色矢印1(タブレット・縦)--*/
.g12-arrow3-1 {
	width: 4vw;
	top: 79vh;
	left: 27vw;	
}

/*--色矢印2(タブレット・縦)--*/
.g12-arrow3-2 {
	width: 6vw;
	top: 82vh;
	left: 22vw;	
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール１３(タブレット・縦)--*/

/*--ゴール１３文章(タブレット・縦)--*/
/*--G13文章--*/
/*--私たちが実践する「気象--*/
.g13-sec1{
	width: 95vw;
	top: 0.5vh;
	left: 2vw
}

/*--原材料の確保 ＝『サプライチェーンの根幹をより強固に』(タブレット・縦)--*/
.g13-sec2{
	top: 67vh;
	left: 2.5vw
}

/*--垂直展開となる外国製造業者による(タブレット・縦)--*/
.g13-sec3{
	width: 80vw;
	top: 69vh;
	left: 2.5vw
}

/*--世界規模で変化する資源情勢を視野に入れ、(タブレット・縦)--*/
.g13-sec4{
	width: 42vw;
	top: 32vh;
	left: 2vw
}

/*--事業活動による植物等(タブレット・縦)--*/
.g13-sec5{
	width: 21vw;
	top: 20.5vh;
	left: 2vw
}

/*--屋上緑化、工場緑化で(タブレット・縦)--*/
.g13-sec6{
	width: 21vw;
	top: 18vh;
	left: 75.5vw
}

/*--亀岡工場では既存の原料倉庫棟以外に(タブレット・縦)--*/
.g13-sec7 {
	top: 46vh;
	left: 40vw;	
}


/*--横線２(スマートフォン・縦)--*/
.g13-line-yoko2{
	top: 30vh;
	left: 0vw;
	z-index: 1;
}


/*--g13 span(文字)(タブレット・縦)--*/
/*--環境影響--*/
.g13-inf {
	top: 8vh;
	left: 27.7vw;	
}

/*--CO2の排出(タブレット・縦)--*/
.g13-huka {
	top: 11.5vh;
	left: 27.8vw;	
}

/*--環境配慮(タブレット・縦)--*/
.g13-effort {
	top: 4.5vh;
	left: 59.5vw;	
}

/*--事業活動による環境負荷　－　私たち(タブレット・縦)--*/
.g13-mainasu {
	top: 25vh;
	left: 4.5vw;	
}

/*--環境的リスク：自然災害・パン(タブレット・縦)--*/
.g13-3fac {
	display: block !important;
	top: 85vh;
	left: 49vw;
}

/*--万一の異常気象・不作(タブレット・縦)--*/
.g13-husaku {
	top: 52.7vh;
	left: 5vw;	
}

/*--複数年分の原材料を確保(タブレット・縦)--*/
.g13-many {
	top: 66vh;
	left: 26.5vw;	
}

/*--恒常的な生産(タブレット・縦)--*/
.g13-kou {
	top: 66vh;
	left: 53.5vw;	
}

/*--安定供給・急激な価格変動の防止(タブレット・縦)--*/
.g13-stable {
	top: 52.7vh;
	left: 69.2vw;	
}

/*--つくる責任(タブレット・縦)--*/
.g13-resp {
	top: 66vh;
	left: 86vw;	
}


/*--gif画像--*/
/*--天秤(タブレット・縦)--*/
.g13-ten {
	width: 50vw;
	top: 17.5vh;
	left: 24.5vw;	
}


/*--CO2吸収(タブレット・縦)--*/
.g13-co2-in {
	width: 20vw;
	top: 6vh;
	left: 76vw;	
}

/*--１.２原料倉庫棟(タブレット・縦)--*/
.g13-1-2gen {
	width: 50vw;
	top: 31.5vh;
	left: 48.5vw;	
}

/*--植物資源(タブレット・縦)--*/
.g13-shigen {
	width: 12vw;
	top: 31.5vh;
	left: 75vw;	
}

/*--地球(タブレット・縦)--*/
.g13-earth {
	width: 10vw;
	top: 31.5vh;
	left: 90vw;	
}

/*--製品(スマートフォン・縦)--*/
.g13-prod {
	width: 20vw;
	top: 56.5vh;
	left: 70vw;	
}

/*--商品倉庫棟(タブレット・縦)--*/
.g13-shohin {
	width: 70vw;
	top: 72vh;
	left: 1vw;	
}

/*--船(タブレット・縦)--*/
.g13-ship {
	width: 28vw;
	top: 71vh;
	left: 70vw;	
}
/*********************************************/


/*-------------------------------------*/
/*--縦方向はvhを横方向はvwを用いる--*/
/*--ゴール１７(タブレット・縦)--*/

/*--G17文章(スマートフォン・縦)--*/
/*--複数の企業同士が他には無い互いの(スマートフォン・縦)--*/
.g17-sec3{
	width: 95vw;
	top: 29vh;
	left: 2vw
}


/*--画像の大きさ（幅）、文字サイズをビューポート（画面幅vw）で指定--*/
/*--G17--*/
/*--１７人が手をつなぐ(タブレット・縦)--*/
.g17-hand {
	width: 75vw;
	top: 17vh;
	left: 12.5vw;	
}

/*--G12 アイコン(タブレット・縦)--*/
.g17-icon12 {
	width: 6vw;
	top: 52.7vh;
	left: 32.2vw;		
}

/*--G3 アイコン(タブレット・縦)--*/
.g17-icon3 {
	width: 6vw;
	top: 63.6vh;
	left: 13vw;		
}

/*--G8 アイコン(タブレット・縦)--*/
.g17-icon8 {
	width: 6vw;
	top: 69.8vh;
	left: 13vw;				
}

/*--G5 アイコン(タブレット・縦)--*/
.g17-icon5 {
	width: 6vw;
	top: 63.6vh;
	left: 82vw;		
}

/*--G4 アイコン(タブレット・縦)--*/
.g17-icon4 {
	width: 6vw;
	top: 69.8vh;
	left: 82vw;		
}

/*--G7 アイコン(タブレット・縦)--*/
.g17-icon7 {
	width: 6vw;
	top: 76.5vh;
	left: 9vw;			
}

/*--G9 アイコン(タブレット・縦)--*/
.g17-icon9 {
	width: 6vw;
	top: 76.5vh;
	left: 90vw;			
}

/*--G12 アイコン(タブレット・縦)--*/
.g17-icon12 {
	width: 6vw;
	top: 55.7vh;
	left: 32.2vw;		
}

/*--G13 アイコン(タブレット・縦)--*/
.g17-icon13 {
	width: 6vw;
	top: 82.5vh;
	left: 30.5vw;	
}

/*--G17 アイコン(タブレット・縦)--*/
.g17-icon17 {
	width: 10vw;
	top: 45vh;
	left: 43.5vw;	
}

/*--上の輪(タブレット・縦)--*/
.g17-top {
	width: 28vw;
	top: 52vh;
	left: 34.5vw;	
}

/*--中央の輪(タブレット・縦)--*/
.g17-middle {
	width: 42vw;
	top: 61vh;
	left: 28vw;	
}

/*--下の輪(タブレット・縦)--*/
.g17-bottom {
	width: 88vw;
	top: 68vh;
	left: 5vw;	
}


/*--g17 span(文字)--*/
/*--グローバルパートナーシップ(タブレット・縦)--*/
.g17-partner {
	top: 25.9vh;
	left: 32.5vw;	
}


/*--カラフルな横線--*/
.g17-color-bar {
	width: 100%;
	top: 87.5vh;
	left: 0;	
	z-index: 5;
}



/*--ゴールの内容(タブレット・縦)--*/
/*--持続可能な生産供給体制・縦)--*/
.g17-g12 {
	top: 54vh;
	left: 40.3vw;	
}

/*--地域社会への貢献と(タブレット・縦)--*/
.g17-g3 {
	top: 61vh;
	left: 20vw;	
}

/*--働きがいのある職場環境を(タブレット・縦)--*/
.g17-g8 {
	top: 67vh;
	left: 20vw;	
}

/*--女性社員の積極的登用(タブレット・縦)--*/
.g17-g5 {
	top: 61vh;
	left: 60vw;	
}

/*--未来を担う子どもたちが(タブレット・縦)--*/
.g17-g4 {
	top: 67vh;
	left: 60vw;	
}

/*--持続可能な近代的エネルギーに(タブレット・縦)--*/
.g17-g7 {
	top: 74vh;
	left: 16vw;	
}

/*--レジリエントな生産を可能とする基盤(タブレット・縦)--*/
.g17-g9 {
	top: 74vh;
	left: 63vw;	
}

/*--気象変動を配慮した事業活動と(タブレット・縦)--*/
.g17-g13 {
	top: 80vh;
	left: 38vw;	
}

/*--『経済』(タブレット・縦)--*/
.g17-economy {
	top: 53.5vh;
	left: 3vw;
}

/*--『社会』(タブレット・縦)--*/
.g17-society {
	top: 61.8vh;
	left: 3vw;
}

/*--『環境』(タブレット・縦)--*/
.g17-environment {
	top: 74.7vh;
	left: 3vw;
}


/*--横線１(タブレット・縦)--*/
.g17-line-yoko1{
	display: none;
}

/*--横線２(タブレット・縦)--*/
.g17-line-yoko2{
	display: none;
}



/*--のびる横線３(タブレット・縦)--*/
.g17-line-yoko3 {
	top: 56.2vh;
	left: 3vw;
	z-index: 1;
	transition: width 2s;
	width: 0;
}
.g17-line-yoko3.active {
	width: 40%;
}

/*--のびる横線4(タブレット・縦)--*/
.g17-line-yoko4 {
	top: 64.5vh;
	left: 3vw;
	z-index: 1;
	transition: width 2s;
	width: 0;
}
.g17-line-yoko4.active {
	width: 33%;
}

/*--のびる横線5(タブレット・縦)--*/
.g17-line-yoko5 {
	top: 77.2vh;
	left: 3vw;
	z-index: 1;
	transition: width 2s;
	width: 0;
}
.g17-line-yoko5.active {
	width: 28%;
}
/*********************************************/




/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}




/*---------------------------------------------------------------------------
ここから下は画面幅370px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:370px) {
/*全体の設定
---------------------------------------------------------------------------*/

/*--目標の表題を入れる要素(共通設定)--*/
.goal-title{
	font-size: 2.0vh;
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅370以上430px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:370px) and (max-width:430px) {

	/*--目標の表題を入れる要素(共通設定)--*/
.goal-title{
	font-size: 1.6vh;
}

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}



/*---------------------------------------------------------------------------
ここから下は画面幅940px以下、かつ画面が「横長」の場合の追加指定 
※スマホの横置き
---------------------------------------------------------------------------*/
@media screen and (max-width: 1025px) and (hover: none) and (pointer: coarse) and (orientation:landscape){
.blessing .leaf2, .blessing .leaf3, .blessing .leaf-l, .blessing .leaf-r{
	display: none;
}

/*--スマホ用のナビゲーションを表示--*/
#navArea {
	display: block;
}

/*============
.toggle_btn
=============*/
.toggle_btn {
	top: 10px;


}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅940px以上の追加指定
ポインター属性を追記、PCのような正確なマウスポインタ―がある媒体はロード画面を実行させる。
--------------------------------------------------------------------------*/
@media screen and (min-width:940px) and (pointer:fine){


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}



/*---------------------------------------------------------------------------
ここから下は画面幅1800以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1800px) {

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}








	
/*---------------------------------------------------------------------------
タブレット端末の横向きだけの追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
/* タブレット（ランドスケープモード）に適用するスタイルを記述 */


/*--スマホ用のナビゲーションを表示--*/
#navArea {
	display: block;
}

/*--ページ上にある社名--*/
header .logo{			
	display: block;				/*--ブロック要素--*/
	width: 20vw;				/*--表示幅の指定--*/
	position: absolute;			/*--画面左上を基点になる--*/
	top: 2vw;					/*--画面上からの距離--*/
	right: 7vw;
	position: fixed;			/*--要素を固定--*/
	/*z-index: -1;				/*--重なりの順序を指定--*/
}

.icon-container img{
	width: 4vw;
}

.icon-fixed{
	top: 1.8vw;
	background-color: rgba(255, 255, 255,0);	/*--透明--*/
}

.top .kame{
	bottom: 13vh;
}

/*--縦方向に伸びる誘導線－後続するコンテンツへの誘導--*/
.scrollDown {
	top: 42vh;
}

/*--「マウスポインタ―」--*/
.scrolldown-mouse {
	display: none;
}


.blessing .leaf-l{display: none;}

.blessing .leaf-r{display: none;}

.blessing .leaf2{display: none;}

.blessing .leaf3{display: none;}


/*--タブレット端末の横向きだけの追加指定--*/
.parallax-top-margin{
	height:15px !important;
}

.sky{
	/*border: solid 1px #0baf3c;*/
	height: 50vh;
}


.ka-plant.active {
	transform: translateY(-105vh);
	opacity: 1;
}

.slow-scroll {
	/* 末尾200vhまでのスクロールにかかる時間を延長 */
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	scroll-snap-align: start;
	scroll-padding-bottom: 200vh;
}







/*--横線（太）--*/
.g9-line-yoko2{
	height: 2px; /*--伸びる前の太さを指定します--*/
}
.g9-line-yoko2.active {
    width: 37%; /*--線が中心から左右に伸びる幅を指定します--*/
}

/*--縦線３（太）--*/
.g9-line-tate3{
	width: 3px; 
}

/*--縦線４（太）--*/
.g9-line-tate4{
	width: 3px; 
}

@keyframes expandHeight1 {
	from {
	  height: 0px; /* 開始時の高さ */
	}
	to {
	  height: 220px; /* 終了時の高さ */
	}
}






/*ボタンの設定*/
.pagetop a {
	font-size: 2.2em;	/*文字サイズ*/
	width: 5vw;		/*幅*/
	line-height: 5vw;	/*高さ*/
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}