@charset "UTF-8";

/* main-visual
======================================================================*/

.main-visual.mv-position{
	background-image: url(../../images/position/main_visual@2x.png);
	background-position: center center;
	background-size: 100% auto;
	/*background-color: #000308;*/
}
@media screen and (max-width: 480px){
.main-visual.mv-position{
	background-image: url(../../images/position/main_visual_sp@2x.png);
}
}

/* introduction
======================================================================
.introduction{
	width: 100%;
	padding: 120px 0 40px;
	background-image: url(../../images/bg_intro.png);
	background-repeat: repeat-x;
	background-position: top center;
}
@media screen and (max-width: 768px){
.introduction{
    padding: 40px 0 20px;
	background-position: top -100px center;
}
}
======================================================================*/

/* intro
======================================================================*/
.intro{
	max-width: 1280px;
    margin: 80px auto 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (max-width: 768px){
.intro{
    margin: 40px auto 0;
}
}

.intro h3{
    text-align: center;
}

.intro h5{
    font-family: 'Roboto', "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	font-size: 2.8rem;
    font-weight: 700;
	text-align: center;
    margin-bottom: 15px;
    color: #4f6077;
}
@media screen and (max-width: 768px){
.intro h5{
	font-size: 1.8rem;
    margin-bottom: 10px;
}
}

.intro h5 span{
    font-family: 'Shippori Mincho', 'Noto Serif JP', 'Times New Roman', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'HGS明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: #000000;
}
@media screen and (max-width: 768px){
.intro h5 span{
    font-size: 1.1rem;
}
}

.intro h6{
    font-family: 'Roboto', "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	font-size: 1.8rem;
    font-weight: 700;
	text-align: center;
	color: #4f6077;
    margin-bottom: 15px;
}
@media screen and (max-width: 768px){
.intro h6{
	font-size: 1.6rem;
    margin-bottom: 10px;
}
}

.intro p{
    font-size: 1.4rem;
    text-align: center;
}
@media screen and (max-width: 768px){
.intro p{
    font-size: 1.2rem;
    text-align: justify;
}
}

.point-wrap{
	position: relative;
	margin-top: 60px;
}
@media screen and (max-width: 768px){
.point-wrap{
    margin-top: 20px;
    padding: 20px 0;
}
}
.point-wrap .txt-box{
	position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
	z-index: 3;
}
@media screen and (max-width: 768px){
.point-wrap .txt-box{
	position: relative;
	text-align: center;
	margin: 0 auto;
}
.point-wrap .txt-box img{
	max-width: 220px;
}
}

.intro ul.point{
	position: relative;
    width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 160px;
}
@media screen and (max-width: 768px){
.intro ul.point{
	margin-top: -40px;
	padding-top: 0px;
}
}

.intro ul.point li{
	width: 50%;
	position: relative;
}
@media screen and (max-width: 768px){
.intro ul.point li{
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
}
.intro ul.point li:last-child{
    margin-bottom: 0px;
}
}

.intro ul.point li p.cap{
	position: absolute;
	font-size: 1.1rem;
	right: 5px;
	bottom: 5px;
}


/* ttl_bdr
======================================================================*/
.ttl_bdr{
	max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0 30px;
	/*-border-top: 10px solid rgba(201,188,156,0.20);*/
}
@media screen and (max-width: 768px){
.ttl_bdr{
     padding: 30px 0 0px;
}
}

.top_bnr p.caption{
    text-align: justify;
    font-size: 1.2rem;
}
@media screen and (max-width: 768px){
.top_bnr p.caption{
    font-size: 1.1rem;
}
}


/* position
======================================================================*/
.position{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto 40px;
	position: relative;
	z-index: 1;
	display: flow-root;
}
/*
.position::after {
  content: "";
  display: table;
  clear: both;
}*/
@media screen and (max-width: 768px) {
.position{
    margin: 0 auto 20px;
} 
}

/* box-img */
.position .box-img{
    width: 100%;
	/*max-width: 950px;*/
    position: relative;
    /*float: left;*/
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.position .box-img.rev{
    float: right;
}

@media screen and (max-width: 768px) {
.position .box-img{
    /*width: 72%;*/
}
}

.position .box-img div.pht{
    width: 49%;
    position: relative;
}
@media screen and (max-width: 768px) {
.position .box-img div.pht{
    width: 100%;
    margin-bottom: 20px;
}
.position .box-img div:last-child{
    margin-bottom: 0px;
}
}

.position .box-img div.outro{
    flex: 1;
}

.position .box-img p.cap {
	font-size: 1.4rem;
    /*font-size: 1.1rem;
    color: #FFFFFF;
    position: absolute;
    right: 5px;
    bottom: 5px;*/
	margin-top: 5px;
}
@media screen and (max-width: 768px) {
.position .box-img p.cap {
    font-size: 1.2rem;
}
	}
.position .box-img p.cap.blk {
    color: #000000;
}

/* box-txt */
.position .box-txt{
	width: 100%;
	max-width: 438px;
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 3;
	background-color: rgba(122,107,126,0.90);
	padding: 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.position .box-txt.rev{
	text-align: left;
}

@media screen and (max-width: 768px) {
.position .box-txt{
	position: relative;
	margin-top: 40px;
}
}

.position .box-txt span{
	font-size: 2.6rem;
	color: #FFFFFF;
	text-align: center;
}
@media screen and (max-width: 768px) {
.position .box-txt span{
	font-size: 2.0rem;
}
}

/* box-copy */
.position .box-copy{
    width: 100%;
	max-width: 1040px; /*1000*/
	padding: 40px 20px;
    margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
.position .box-copy{
    width: 100%;
    max-width: 100%;
    padding: 20px;
}
}

.position .box-copy.rev{
	width: 75%;
	max-width: 950px;
    padding-left: 0;
	margin-right: 0;
}

@media screen and (max-width: 768px) {
.position .box-copy.rev{
    width: 100%;
    max-width: 100%;
    padding: 20px;
}
}

.position h4{
    font-size: 2.4rem;
    text-align: left;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.position h4{
    font-size: 1.8rem;
    letter-spacing: -0.05em;
    margin-bottom: 10px;
}
}

.position p{
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: justify;
}
@media screen and (max-width: 768px) {
.position p{
    font-size: 1.2rem;
}
}


/* outro
======================================================================*/
.outro{
	max-width: 1280px;
    margin: 0 auto 80px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (max-width: 768px){
.outro{
    margin: 0 auto 40px;
}
}

.outro ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}

.outro ul li.left{
	width: 59%;
	max-width: 755px;
}
@media screen and (max-width: 768px){
.outro ul li.left{
	width: 100%;
	margin-bottom: 20px;
}
}

.outro ul li.right{
	width: 41%;
	max-width: 514px;
}
@media screen and (max-width: 768px){
.outro ul li.right{
	width: 100%;
}
}

.outro p.cap {
	font-size: 1.4rem;
	margin-top: 5px;
}
@media screen and (max-width: 768px) {
.outro p.cap {
    font-size: 1.2rem;
	padding: 0 20px;
}
	}