@charset "UTF-8";
/* CSS Document */

html,body {
	max-width: 100%;
} 

h3 {
	text-align: left;
}

box1,box2,box3,box4,box5,box6,box7 {
    box-sizing: border-box;
    padding: 10px;
}
.container {
	width:100%;
    display: grid;
    grid-template-columns: 25% 25% 50%;
	grid-gap: 5px;
    grid-template-rows: 100% 100%;
	color: #666666;
}
.grid-item-1 {
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 1;
    grid-column-end: 2;
 
  /* 列のライン指定 */
    grid-row-start: 1;
    grid-row-end: 2;
}
.grid-item-2{
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 2;
    grid-column-end: 3;
 
  /* 列のライン指定 */
    grid-row-start: 1;
    grid-row-end: 2;
}
.grid-item-3 {
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 1;
    grid-column-end: 2;
 
  /* 列のライン指定 */
    grid-row-start: 2;
    grid-row-end: 3;
}
.grid-item-4 {
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 2;
    grid-column-end: 3;
 
  /* 列のライン指定 */
    grid-row-start: 2;
    grid-row-end: 3;
	
}
.grid-item-5 {
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 3;
    grid-column-end: 4;
 
  /* 列のライン指定 */
    grid-row-start: 1;
    grid-row-end: 3;
}

.petal {
    background-image: url("http://www.hmr.jp/features/PL/180601/img/0601_petal.jpg");
	padding:5% 0 ;
}

.petalsp {
    background-image: url("http://www.hmr.jp/features/PL/180601/img/0601_petal.jpg");
	padding:1% 0 ;
}

.container2 {
	width:60%;
    display: grid;
    grid-template-columns:50% 50%;
	grid-gap: 5px;
    grid-template-rows: 100% 100%;
	color: #666666;
}
.grid-item-6 {
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 1;
    grid-column-end: 2;
 
  /* 列のライン指定 */
    grid-row-start: 1;
    grid-row-end: 2;
}
.grid-item-7{
    background-color: none;
	/* 行のライン指定 */
    grid-column-start: 2;
    grid-column-end: 3;
 
  /* 列のライン指定 */
    grid-row-start: 1;
    grid-row-end: 2;
}


/*フォント*/
body {
	font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size: 14px;
	line-height:2.35;
	color: #666666;
}


.midashipc {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 36px;
	line-height:1.45;	
	letter-spacing: 2.3px;
	margin-left:0.6%;
	font-weight:100;
	color: #000000;
	text-align:left;
}

.midashi {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 26px;
	line-height:1.45;	
	letter-spacing: 2.3px;
	margin-left:0.5%;
	font-weight:100;
	color: #000000;
	text-align:left;
}

.midashisp {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 21px;
	line-height:1.45;	
	letter-spacing: 2.3px;
	margin-left:0.5%;
	font-weight:100;
	color: #000000;
	text-align:left;
}

.midashi2 {
	font-family:'Century','MS Serif', serif;
	font-size: 30px;
	line-height:1.45;	
	letter-spacing: 2.3px;
	margin-left:0.5%;
	font-weight:100;
	color: #666666;
	text-align:center;
}

.midashi2sp {
	font-family:'Century','MS Serif', serif;
	font-size: 26px;
	line-height:1.45;	
	letter-spacing: 2.3px;
	font-weight:100;
	color: #666666;
	text-align:center;
}


.nav {
	font-family:"Century",'MS Serif', serif;
	font-size: 36px;	
	font-weight:nomal;
	color: #000000;
	text-align:center;
}

.navsp {
	font-family:"Century",'MS Serif', serif;
	font-size: 24px;	
	font-weight:nomal;
	color: #000000;
	text-align:center;
}

.cappc {
	font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size: 14px;	
	font-weight:nomal;
	color: #666666;
	text-align:left;
}

.textareasp {
	font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size: 12px;	
	font-weight:nomal;
	color: #666666;
	text-align:left;
	padding:3%;
}

/*調整系*/

.tac {
	text-align: center;
}

.tal {
	text-align: left;
}

.tar {
	text-align: right;
}

.mt1 {
	margin-top:1%;
}

.mt3 {
	margin-top:3%;
}

.mt5 {
	margin-top:5%;
}

.mb1 {
	margin-bottom:1%;
}

.mb3 {
	margin-bottom:3%;
}

.mt10 {
	margin-top:10%;
}

.mt15 {
	margin-top:15%;
}

.mt30 {
	margin-top:30%;
}

.ml1 {
	margin-left:1%;
}

.ml10 {
	margin-left:10%;
}

.ml33 {
	margin-left:33%;
}

.mr33 {
	margin-right:33%;
}

.mtm3 {
	margin-top:-3%;
}

.mb10 {
	margin-bottom:10%;
}

.mb20 {
	margin-bottom:20%;
}


.mb30 {
	margin-bottom:30%;
}


.mbm5 {
	margin-bottom:-5%;
}


.ml18 {
	margin-left:18%;
}

.ml3 {
	margin-left:-3%;
}


/*動かす系*/

.fade-in {
  transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
}