@charset "UTF-8";
/*
コンテンツ最大幅 1024px
レスポンシブのブレークポイント 640px
*/
/*サイドメニューのスタイル（元サイトより）*/
/******************
		仕様
*******************/
#container {
  width: 100%;
}
#header {
  margin: 0 auto;
}
#footer {
  margin-top: 0;
}
/******************
	　　汎用
*******************/
img {
  max-width: 100%;
}
.SP_only {
  display: none; /*サイド非表示*/
}
/*ここからキャンペーンページ内容のスタイル*/
.robot_only {
  display: none; /*画面には表示させないためのクラス。imgタグのalt属性の代わりとして*/
}
.PC_only {}
/******************
	全体
*******************/
.container_full { /*幅がブラウザ幅いっぱいのコンテンツの入れ物*/
  width: 100%; /*画面幅１００％*/
  margin: 0 auto; /*中央揃え*/
  max-width: 1200px;
}
.container_1200px { /*幅が最大1024pxのコンテンツの入れ物*/
  max-width: 1200px;
  width: 100%; /*画面幅１００％*/
  margin: 0 auto;
}
/******************
	img効果
*******************/
.column_item img　{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.column_item img{
  width: 100%;
  transition-duration: 0.5s;
}
.column_item:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}
/******************
ヒーロー画像部分
*******************/
@media (max-width: 767px){
.container_full.top_container{
	margin-top: 20%;
  }
} 	
	
.title_image {
  width: 100%;
}
.mobile_image {
  width: 100%;
}
/******************
	概要
*******************/
/******************
	PICK UP
*******************/
.pickup_title {
  text-align: center;
}
.pickup_image {
  padding-top: 45px;
  text-align: center;
}
.container_1200px-3 { /*幅が最大1024pxのコンテンツの入れ物の3カラム目*/
  max-width: 1200px;
  width: 100%; /*画面幅１００％*/
  margin: 0 auto;
}
.column_outer { /*カラム（flexで横並び）。columnクラスをこの中に入れる*/
  display: flex;
  margin: 4%;
}
.column { /*横並び（640px以下は縦並び）になるコンテンツの入れ物*/
  width: 100%; /*画面幅１００％*/
  margin-bottom: 20%;
  margin-right: 100px;
}
.column:last-child {
  margin-right: 0;
}
.column_item {
  text-decoration: none;
}
.column_item img {
  width: 100%; /*画面幅１００％*/
}
.sec03_bkimg {
  background-size: cover; /*画像を画面幅に入れる*/
  background-position: top;
  margin-top: 0;
  position: relative;
}
.pickup_title img {
  width: 80%; /*画面幅１００％*/
  left: 50%;
}

/******************
	PCレスポンシブ
*******************/
/*全体*/
@media (min-width: 641px) {
  /*ヒーロー*/
  img.title_image_sec01 {
    display: block;
  }
  img.title_image {
    display: block;
  }
  .mobile_image1 {
    display: none;
  }
  .pc_image1 {
    display: block;
  }
  /*概要*/
  .mobile_image2 {
    display: none;
  }
  .pc_image2 {
    display: block;
    margin-top: 2px;
  }
  /*PICK　UP*/
  .sec03_bkimg {
    background-image: url('images/back_pc.jpg');
    margin-top: 0px;
    margin-bottom: -40px;
  }
  .pickup_image_sp {
    display: none;
  }
  .pickup_image {
    display: block;
  }
  .container_1200px-3 {
    background-image: none;
  }
	.column_item img　{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.column_item img{
  width: 100%;
  transition-duration: 0.5s;
}
.column_item:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}
}
/*
  h3 {
    font-size: 30px;
  }
*/
/******************
	SPレスポンシブ
*******************/
@media (max-width: 640px) { /*スマホサイズ：ブラウザ幅が0~640pxまでは、この中に指定したスタイルが上記スタイルより優先（上書き）される。*/
  /*全体*/
  .SP_only {
    display: block; /*サイド表示させる*/
  }
  /*ヒーロー*/
  .mobile_image1 {
    display: block;
    margin-top: -5px;
  }
  img.title_image_sec01 {
    display: none;
  }
  img.title_image {
    display: none;
  }
  .pc_image1 {
    display: none;
  }
  /*概要*/
  .mobile_image2 {
    display: block;
    margin-top: -5px;
  }
  .pc_image2 {
    display: none;
  }
  /*PICKUP*/
	.column:last-child {
		margin: 0 auto;
	}
  .column_outer { /*（flex解除）*/
    display: block;
    margin: 0 auto;
  }
  .column {
    width: 80%;
    justify-content: center;
    margin: 0 auto;
	padding-bottom: 20px;
  }
  .sec03_bkimg {
    background-image: none;
  }
  .container_1200px-3 {
    background-image: url("images/bgimg_sp.jpg");
    margin-top: 0px;
    background-size: cover; /*画像を画面幅に入れる*/
    background-position: center;
    margin-bottom: 0px;
  }
  .pickup_image_sp { /*spサイズのピックアップの説明*/
    display: block;
  }
  .pickup_image { /*pcサイズのピックアップの説明*/
    display: none;
  }
} /*under640px終了*/
/*↓サイトの仕様で入れている*/
@media screen and (max-width: 1024px) {
  #container {
    width: 1024px;
  }
}
@media screen and (max-width: 600px) {
  #container {
    width: 100%;
  }
  #footer #copy small {
    padding: 1.4em 0 0.5em;
  }
  #footer #url {
    padding-bottom: 35px;
  }
	.column_item img　{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.column_item img{
  width: 100%;
  transition-duration: 0.5s;
}
.column_item:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}
}
/*ココマデ*/